在 React 中按类名查找所有元素

作者

在 React 中按类名查找所有元素

Find all elements by className in React

在 React 中通过 className 查找所有元素：

  1. 使用该getElementsByClassName方法获取具有特定类的所有元素。
  2. 将对方法的调用置于useEffect()挂钩中。
应用程序.js
import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    const allWithClass = Array.from(
      document.getElementsByClassName('example')
    );
    console.log(allWithClass);
  }, []);

  return (
    <div>
      <div>
        <h2 className="example">Alice</h2>
        <h2 className="example">Bob</h2>
        <h2 className="example">Carl</h2>
      </div>
    </div>
  );
};

export default App;

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因此它只会在组件安装时运行。

我们使用
document.getElementsByClassNameexample方法来选择页面上具有该类的
所有元素。

但是，您也可以使用
document.querySelectorAll
方法，您可以向该方法传递一个选择器而不仅仅是一个类名。

应用程序.js
import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    const allWithClass = Array.from(
      document.querySelectorAll('h2.example')
    );
    console.log(allWithClass);
  }, []);

  return (
    <div>
      <div>
        <h2 className="example">Alice</h2>
        <h2 className="example">Bob</h2>
        <h2 className="example">Carl</h2>
      </div>
    </div>
  );
};

export default App;

我们将选择器传递给该querySelectorAll方法。h2上面的示例选择了页面上具有 class 的所有元素example。

我们使用
Array.from
方法将集合转换为数组。但是，这对于您的用例可能不是必需的。

您可以遍历元素数组并对每个元素执行操作。下面是一个更改h2类为 的每个元素的背景颜色的示例example。

应用程序.js
import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    const allWithClass = Array.from(
      document.querySelectorAll('h2.example')
    );
    console.log(allWithClass);

    allWithClass.forEach(element => {
      element.style.backgroundColor = 'salmon';
    });
  }, []);

  return (
    <div>
      <div>
        <h2 className="example">Alice</h2>
        <h2 className="example">Bob</h2>
        <h2 className="example">Carl</h2>
      </div>
    </div>
  );
};

export default App;

–

发表评论