javascript - 如何在 React js 中使用 forEach

问题描述

我想创建一个函数，它遍历具有相同类的所有元素并删除特定类。

它可以使用 JavaScript 轻松完成。

const boxes = document.querySelectorAll(".box1");
function remove_all_active_list() {
    boxes.forEach((element) => element.classList.remove('active'));
}

但是我怎么能做类似的事情是 ReactJs。我面临的问题是我不能document.querySelectorAll(".box1")在 React 中使用，但是我可以使用React.createRef()，但它并没有给我所有元素，它只给了我最后一个元素。

这是我的反应代码

应用程序.js

import React, { Component } from 'react';
import List from './List';

export class App extends Component {

    componentDidMount() {
        window.addEventListener('keydown', this.keypressed);
    }

    keypressed = (e) => {
        if (e.keyCode == '38' || e.keyCode == '40') this.remove_all_active_list();
    };

    remove_all_active_list = () => {
        // boxes.forEach((element) => element.classList.remove('active'));
    };

    divElement = (el) => {
        console.log(el);
        el.forEach((element) => element.classList.add('active'))
    };

    render() {
        return (
            <div className="container0">
                <List divElement={this.divElement} />
            </div>
        );
    }
}

export default App;

List.js

import React, { Component } from 'react';
import data from './content/data';

export class List extends Component {
    divRef = React.createRef();

    componentDidMount() {
        this.props.divElement(this.divRef)
    }

    render() {
        let listItem = data.map(({ title, src }, i) => {
            return (
                <div className="box1" id={i} ref={this.divRef} key={src}>
                    <img src={src} title={title} align="center" alt={title} />
                    <span>{title}</span>
                </div>
            );
        });
        return <div className="container1">{listItem}</div>;
    }
}

export default List;

请告诉我如何解决这个问题。

标签： javascripthtmlcssreactjs

解决方案

简短的回答

你不会的。

相反，您将有条件地将类添加和删除到元素、组件或collection.map()React 组件内部。

例子

这是一个说明两者的示例：

import styles from './Example.module.css';

const Example = () => {
  const myCondition = true;

  const myCollection = [1, 2, 3];

  return (
    <div>
      <div className={myCondition ? 'someGlobalClassName' : undefined}>Single element</div>
      {myCollection.map((member) => (
        <div key={member} className={myCondition ? styles.variant1 : styles.variant2}>
          {member}
        </div>
      ))}
    </div>
  );
};

export default Example;

所以在你的情况下：

您可以将activeprop 传递给<ListItem />组件并props.active用作条件。
或者，您可以发送activeIndex到<List />组件并index === activeIndex用作地图中的条件。

解释

与向 HTMLElement 添加或删除类不同，react 负责渲染和更新整个元素及其所有属性（包括class- 在 react 中您将写为className）。

在不进入 shadow dom 以及为什么 react 可能更可取的情况下，我将尝试解释思维方式的转变：

组件不仅描述 html 元素，还可能包含逻辑和行为。每次任何属性更改时，至少会再次调用 render 方法，并将元素替换为新元素（即之前没有任何类，但现在有一个类）。

现在换班要容易得多。您需要做的就是更改属性或修改条件（if 语句）的结果。

因此，与其在 dom 中选择一些元素并对其应用一些逻辑，不如根本不选择任何元素；逻辑写在 react 组件内部，靠近进行实际渲染的部分。

进一步阅读

https://reactjs.org/docs/state-and-lifecycle.html

如果需要改写或添加某些内容，请不要犹豫添加评论。

javascript - 如何在 React js 中使用 forEach

问题描述

解决方案

推荐阅读