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

React 1年前 299

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

使用 getElementsByClassName 方法获取具有特定类的所有元素。
将对该方法的调用放在 useEffect() 钩子中。

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.getElementsByClassName 方法来选择页面上具有示例类的所有元素。

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

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

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 方法。上面的示例选择了页面上所有具有 example 类的 h2 元素。

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

我们可以遍历元素数组并对每个元素执行操作。下面是一个示例，它更改了具有示例类的每个 h2 元素的背景颜色。

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;