面试题：React 项目中，如何动态改变组件的 class 来切换样式？

在 React 项目中，动态改变组件的 class 来切换样式是一个常见的需求。这可以通过多种方式实现，包括直接操作 className 属性、使用状态管理以及借助第三方库来简化样式处理。以下是几种主要的方法：

方法 1：直接操作 className

最基础的方式是根据组件的状态（state）或属性（props）直接设置元素的 className。

示例：

import React, { useState } from 'react';

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

  return (
    <button
      className={isActive ? 'active' : 'inactive'}
      onClick={() => setIsActive(!isActive)}
    >
      切换样式
    </button>
  );
}

在这个例子中，当用户点击按钮时，isActive 状态会在 true 和 false 之间切换，从而改变按钮的 className，进而应用不同的样式。

方法 2：使用模板字符串

如果需要组合多个类名，可以使用模板字符串或简单的条件表达式。

示例：

function DynamicClassComponent({ isActive, isDisabled }) {
  return (
    <div
      className={`base-class ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`}
    >
      动态样式
    </div>
  );
}

这种方式适合于需要添加或移除多个类的情况。

方法 3：使用对象语法

对于更复杂的场景，使用对象来构建 className 可以使代码更加清晰和易于维护。

示例：

function ComplexClassComponent({ isActive, isDisabled }) {
  const classObject = {
    'base-class': true,
    active: isActive,
    disabled: isDisabled,
  };

  // 将对象转换为字符串
  const classNames = Object.keys(classObject)
    .filter(key => classObject[key])
    .join(' ');

  return <div className={classNames}>复杂样式控制</div>;
}

这种方法通过一个对象来定义所有的类名及其是否应该被应用，并最终将这些类名拼接成一个字符串。

方法 4：使用第三方库（如 classnames）

为了简化上述过程，许多开发者选择使用像 classnames 这样的库来帮助他们管理和合并类名。

首先安装 classnames：

npm install classnames

然后，在你的组件中使用它：

示例：

import React, { useState } from 'react';
import classNames from 'classnames';

function ClassNamesExample() {
  const [isActive, setIsActive] = useState(false);
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <button
      className={classNames('btn', {
        'btn-active': isActive,
        'btn-disabled': isDisabled,
      })}
      onClick={() => setIsActive(!isActive)}
      disabled={isDisabled}
    >
      使用 classnames 库
    </button>
  );
}

classnames 库提供了一个非常灵活的方式来处理类名的组合，无论是静态的还是基于条件的。

总结

• 直接操作 className 是最基本的方式，适用于简单的场景。
• 模板字符串 或 对象语法 提供了更多灵活性，特别是当你需要根据多个条件来决定类名时。
• 使用 第三方库 如 classnames 能够大大简化类名的管理，尤其是在处理大量条件类时显得尤为有用。

选择哪种方法取决于具体的应用场景和个人偏好。对于大多数情况，推荐使用 classnames 库，因为它能有效提高代码的可读性和可维护性。