迹忆客 专注技术分享

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

1. 在元素上设置 ref 属性。
2. 在 ref 对象上使用 classList.contains() 方法来检查该类是否存在。
3. 如果元素的类列表包含该类，则该方法返回 true。

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 属性被初始化为传递的参数。

const ref = useRef(null);

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

// 👇️ 检查元素是否包含挂载类
useEffect(() => {
  if (ref.current.classList.contains('my-class')) {
    console.log('Element contains class');
  } else {
    console.log('Element does NOT contain class');
  }
}, []);

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

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

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

如果我们需要检查元素是否包含单击类，请在元素上设置 onClick 属性。

在 React.js 中检查元素是否包含点击类

在 React.js 中检查元素是否包含点击类：

1. 在元素上设置 onClick 属性。
2. 在 event.target 对象上使用 classList.contains() 方法来检查元素是否包含该类。

import {useRef} from 'react';

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

  // 👇️ 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}
        style={{backgroundColor: 'lime'}}
      >
        jiyik.com
      </div>
    </div>
  );
}

我们在 div 元素上设置了 onClick 属性，因此每次单击该元素时都会调用 handleClick 函数。

const handleClick = event => {
  if (event.currentTarget.classList.contains('my-class')) {
    console.log('Element contains class');
  } else {
    console.log('Element does NOT contain class');
  }
};

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

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

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