使用 useEffect 设置 className

📌 相关文章

📜 使用 useEffect 设置 className - Javascript (1)

📅 最后修改于: 2023-12-03 15:06:51.649000 🧑 作者: Mango

在React中，useEffect是一个常用的Hooks，它允许我们在函数组件中使用生命周期方法。在这篇文章中，我们将介绍如何使用useEffect设置className。

通常，我们使用可以使用className属性来设置元素的类名。这样我们就可以使用CSS样式来控制元素的外观。在React中，我们可以使用useEffect来动态地设置元素的类名。

下面是一个例子：

import React, { useState, useEffect } from "react";

function App() {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    if (isActive) {
      document.body.classList.add("active");
    } else {
      document.body.classList.remove("active");
    }
  }, [isActive]);

  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle Active</button>
      <p>This is some content.</p>
    </div>
  );
}

export default App;

在这个例子中，我们创建了一个组件，其中包含一个按钮和一个段落。当点击按钮时，我们会动态地添加或删除类名active。这个类名将应用到<body>元素上。这么做的好处是，我们可以在CSS文件中轻松地切换样式。

这里是使用useEffect设置className的完整代码示例。

import React, { useState, useEffect } from "react";

export default function App() {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    if (isActive) {
      document.body.classList.add("active");
    } else {
      document.body.classList.remove("active");
    }
  }, [isActive]);

  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle Active</button>
      <p>This is some content.</p>
    </div>
  );
}

我们在函数组件中引入了两个Hooks：useState和useEffect。useState作为状态钩子，用于维护按钮的状态是否被点击。useEffect则实现了我们的主要目标。

useEffect的第一个参数是一个函数，在组件成功挂载后执行。回调函数中，你可以对页面元素进行操作。在这个例子中，我们动态地添加或删除了active类名。

第二个参数是一个数组，包含所有应该触发回调的变量，如我们的isActive状态。如果没有传递这个参数，则每次组件重新渲染时都会触发回调。

在组件销毁时，useEffect也可以清除我们所创建的影响页面的回调。

在css文件中，可以这样来定义样式：

.active p {
  color: red;
}

在上述示例中，只有在isActive状态为true时才会将active类名添加到body元素上。当这个类名被添加时，样式表中的规则将会被应用。

这就是如何使用useEffect设置className。该技术在许多React应用程序中都非常有用，因为它能够让你在组件渲染时动态地控制页面元素。