如何根据道具变化更新 React 组件的类名？

2024-03-09 16:35:28

## 在 React 组件中根据道具变化更新组件类

问题

在 React 应用中，有时我们需要根据道具的变化更新组件的类。例如，我们可能有一个根据 active 道具值切换组件类名的按钮组件。

解决方法

要根据道具的变化更新组件类，我们可以使用以下步骤：

创建响应式道具： 使用 useRef 钩子创建一个响应式道具，用于存储组件的状态。例如，对于一个名为 active 的道具，我们可以在组件中使用以下代码：

import { useRef } from "react";

const MyButton = ({ active }) => {
  const activeRef = useRef(false);
  return <button className={activeRef.current ? "active" : "inactive"}>Button</button>;
};

使用 useEffect 钩子监控道具的变化： 当父组件传递给子组件的道具值发生变化时，使用 useEffect 钩子来更新组件的状态。例如：

import { useEffect } from "react";

const MyButton = ({ active }) => {
  const activeRef = useRef(false);

  useEffect(() => {
    activeRef.current = active;
  }, [active]);

  return <button className={activeRef.current ? "active" : "inactive"}>Button</button>;
};

更新组件类： 在 useEffect 钩子中，更新响应式道具的值以反映新道具值的变化。要更新组件类，我们可以使用 className 属性。例如：

import { useEffect } from "react";

const MyButton = ({ active }) => {
  const activeRef = useRef(false);

  useEffect(() => {
    activeRef.current = active;
    activeRef.current ? buttonRef.current.classList.add("active") : buttonRef.current.classList.remove("active");
  }, [active]);

  const buttonRef = useRef();

  return <button ref={buttonRef} className={activeRef.current ? "active" : "inactive"}>Button</button>;
};