在 React 中为 Body 元素添加一个类

作者

在 React 中为 Body 元素添加一个类

Add a class to the Body element in React

在 React 中向 body 元素添加一个类：

  1. document.body在useEffect事件处理程序中访问主体元素。
  2. 使用classList.add()方法将类添加到 body 标记。
  3. 例如，document.body.classList.add('my-class')。
应用程序.js
import {useEffect} from 'react';

import './App.css';

export default function App() {
  useEffect(() => {
    // 👇 add class to body element
    document.body.classList.add('bg-salmon');

    // 👇️ adding multiple classes to body tag
    document.body.classList.add(
      'bg-salmon',
      'my-class-1',
      'my-class-2',
      'my-class-3',
    );

    // 👇️ removing classes from body element
    document.body.classList.remove('my-class-3');

    // 👇️ checking if body element contains a class
    if (document.body.classList.contains('bg-salmon')) {
      console.log('body tag contains class');
    }
  }, []);

  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
}

这是css示例。

应用程序.css
.bg-salmon {
  background-color: salmon;
  color: white;
}

我们使用
classList.add()
方法将一个类添加到 body 元素。

我们可以访问对象body上的元素document。

如果该类已经存在于body元素上，则不会添加两次。

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因为我们只想将类添加到body元素一次 – 当组件安装时。

如果您需要在组件卸载时删除类，请从useEffect挂钩中返回一个清理函数。

应用程序.js
useEffect(() => {
  // 👇 add class to body element
  document.body.classList.add('bg-salmon');


  return () => {
    // 👇️ removing classes from body element
    // when the component unmounts
    document.body.classList.remove('my-class-3');
  }
}, []);

您可以根据需要将尽可能多的类传递给该classList.add()方法。

应用程序.js
document.body.classList.add(
  'bg-salmon',
  'my-class-1',
  'my-class-2',
  'my-class-3',
);

如果需要从 body 标记中删除一个或多个类，请使用
classList.remove()方法。

应用程序.js
document.body.classList.remove(
  'my-class-1',
  'my-class-2',
)

您还可以在事件发生时向 body 元素添加一个类，例如单击按钮。

应用程序.js
import './App.css';

export default function App() {
  const handleClick = () => {
    // 👇️ add class to the body element
    document.body.classList.add('bg-salmon');

    // 👇️ toggle class on the body element
    // document.body.classList.toggle('bg-salmon');
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

我们onClick在按钮元素上设置了 prop，所以每次单击它时，handleClick都会调用该函数。

如果需要在事件发生时切换 body 元素上的类，请使用该
classList.toggle方法。

应用程序.js
import './App.css';

export default function App() {
  const handleClick = () => {
    // 👇️ toggle class on the body element
    document.body.classList.toggle('bg-salmon');
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

classList.toggle
方法从元素
中删除一个现有的类（如果该类存在）。否则，它将类添加到元素。

–

发表评论