检查元素是否包含 React 中的类

作者

在 React 中检查一个元素是否包含一个类

Check if an Element contains a class in React

在 React 中检查一个元素是否包含一个类：

  1. ref在元素上设置道具。
  2. 使用classList.contains()ref 对象上的方法来检查类是否存在。
  3. true如果元素的类列表包含该类，则该方法返回。
应用程序.js
import {useEffect, useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  // 👇️ check if element contains class on mount
  useEffect(() => {
    if (ref.current.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  }, []);

  // 👇️ check if element contains class on click
  const handleClick = event => {
    if (event.currentTarget.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  };

  return (
    <div>
      <div ref={ref} className="my-class" onClick={handleClick}>
        Hello world
      </div>
    </div>
  );
}

检查元素是否有类

该代码片段显示了如何在安装组件或单击元素时检查元素是否包含类。

useRef ()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的div元素。 ref

当我们将 ref prop 传递给元素时，例如<div ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

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

classList.contains
方法
返回一个布尔值——true如果类包含在元素的类列表中，false否则。

如果您需要检查元素是否包含单击时的类，请onClick
在元素上设置 prop。

handleClick每次单击元素时都会调用该函数。

请注意，我们currentTarget在事件上使用了该属性，因为我们想要访问事件侦听器附加到的元素。

上的target属性event为我们提供了对触发事件的元素的引用（可能是后代）。

在我们的handleClick方法中，我们再次使用该classList.contains()方法来检查元素是否包含类。

–