react 动态class

在 React 中，我们可以使用条件渲染来动态添加类名。有几种常见的方法可以实现动态类名：

1. 使用条件运算符：

function MyComponent({ isActive }) {
  return <div className={isActive ? 'active' : ''}>Hello world</div>;
}

在这个例子中，`isActive` 是一个布尔值，根据它的值来决定是否添加 `active` 类名。

2. 使用模板字符串：

function MyComponent({ isActive }) {
  return <div className={`my-component ${isActive ? 'active' : ''}`}>Hello world</div>;
}

在这个例子中，我们使用了模板字符串来拼接类名，根据 `isActive` 的值来决定是否添加 `active` 类名。

3. 使用 classnames 库：
classnames 是一个常用的类名处理库，它可以方便地处理多个类名的情况，并根据条件来动态添加或移除类名。首先，你需要安装 classnames 库：

npm install classnames

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

import classnames from 'classnames';

function MyComponent({ isActive }) {
  const containerClasses = classnames('my-component', {
    'active': isActive,
    'highlight': someCondition // 可以根据其他条件来动态添加类名
  });

  return <div className={containerClasses}>Hello world</div>;
}

在这个例子中，我们使用 classnames 函数来处理多个类名，并通过对象字面量的形式来定义哪些类名是动态的。在这里，如果 `isActive` 为 true，那么 `active` 类名就会被添加到 `my-component` 上。

这些是几种常见的动态添加类名的方法，你可以根据具体的需求选择其中的一种或多种进行使用。