react动态绑定多个类名

在React中动态绑定多个类名可以使用模板字符串和条件语句。以下是一个示例：

import React from 'react';

function MyComponent({ isActive, isHighlighted }) {
  // 定义基础类名
  let className = 'my-component';

  // 根据条件动态添加类名
  if (isActive) {
    className += ' active';
  }
  if (isHighlighted) {
    className += ' highlighted';
  }

  return <div className={className}>Hello, World!</div>;
}

在上面的例子中，我们首先定义了一个基础的类名 `my-component`。然后根据 `isActive` 和 `isHighlighted` 的值来决定是否添加额外的类名。

另一种常见的方式是使用数组和模板字符串来动态绑定多个类名：

import React from 'react';

function MyComponent({ isActive, isHighlighted }) {
  // 定义类名数组
  let classNames = ['my-component'];

  // 根据条件动态添加类名
  if (isActive) {
    classNames.push('active');
  }
  if (isHighlighted) {
    classNames.push('highlighted');
  }

  return <div className={classNames.join(' ')}>Hello, World!</div>;
}

在这个例子中，我们首先定义了一个包含基础类名的数组 `['my-component']`。然后根据条件使用 `push` 方法将额外的类名添加到数组中。最后，我们使用 `join` 方法将数组转换为字符串，并用空格分隔每个类名。

无论是哪种方式，最终都可以将动态生成的类名通过 `className` 属性绑定到相应的元素上。