如何在 React JS 中使用 forEach

Question

我想創建一個 function，它遍歷具有相同 class 的所有元素並刪除特定的 class。

使用 JavaScript 可以輕松完成。

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

但是我怎么能做這個類似的事情是 ReactJs。我面臨的問題是我不能在 React 中使用document.querySelectorAll(".box1")但是，我可以使用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;

清單.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;

請告訴我如何解決這個問題。

Answer 1

簡短的回答

你不會。

相反，您可以有條件地向元素、組件或 React 組件內的collection.map()添加和刪除 class。

例子

這是一個說明兩者的示例：

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;

所以在你的情況下：

• 您可以將active prop 傳遞給<ListItem />組件並使用props.active作為條件。

• 或者，您可以將activeIndex發送到<List />組件並使用index === activeIndex作為 map 中的條件。

解釋

React 不會向 HTMLElement 添加或刪除類，而是負責呈現和更新整個元素及其所有屬性（包括class - 在 React 中，您將編寫為className ）。

在不討論 shadow dom 以及為什么 react 可能更可取的情況下，我將嘗試解釋思維方式的轉變：

組件不僅描述了 html 個元素，還可能包含邏輯和行為。 每次任何屬性更改時，至少再次調用 render 方法，並且元素被新元素替換（即之前沒有任何 class 但現在有一個類）。

現在改變類更容易了。 您需要做的就是更改屬性或修改條件（if 語句）的結果。

因此，不是選擇 dom 中的某些元素並對其應用一些邏輯，而是根本不會 select 任何元素； 邏輯就寫在 React 組件內部，靠近執行實際渲染的部分。

延伸閱讀

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

如果應該改寫或添加某些內容，請不要猶豫添加評論。

Answer 2

將ref傳遞給List組件中的父 div。

...
componentDidMount() {
    this.props.divElement(this.divRef.current)
  }
  ...
<div ref={this.divRef} className="container1">{listItem}</div>

然后在應用程序

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

希望這會奏效。 這是一個簡單的例子https://codesandbox.io/s/staging-microservice-0574t?file=/src/App.js

Answer 3

應用程序.js

import React, { Component } from "react";
import List from "./List";
import "./styles.css";
export class App extends Component {
  state = { element: [] };
  ref = React.createRef();
  componentDidMount() {
    const {
      current: { divRef = [] }
    } = this.ref;
    divRef.forEach((ele) => ele?.classList?.add("active"));
    console.log(divRef);
    window.addEventListener("keydown", this.keypressed);
  }

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

  remove_all_active_list = () => {
    const {
      current: { divRef = [] }
    } = this.ref;

    divRef.forEach((ele) => ele?.classList?.remove("active"));
    // boxes.forEach((element) => element.classList.remove('active'));
    console.log(divRef);
  };

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

export default App;

清單.js

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

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

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

export default List;

為 List 組件創建 ref 並訪問它們的子元素。 當按下鍵（向上/向下箭頭）時，類名為“活動”的元素將被刪除。 參考