How to add multiple classes to a ReactJS Component?

在React中，向同一个元素节点添加多个CSS类可以通过以下几种常见的方法来实现：

使用字符串拼接

最简单直接的方法是将多个类名作为字符串拼接起来，然后将这个字符串赋值给元素的className属性。比如：

jsx
function MyComponent() {
  return <div className="class1 class2 class3">Hello, world!</div>;
}

如果类名是动态计算的，你可以这样操作：

jsx
function MyComponent({ isActive, isDisabled }) {
  const classes = `base-class ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
  return <div className={classes}>Content</div>;
}

使用数组和join方法

如果类名是动态的或者由多个条件控制，可以使用数组来收集所有需要应用的类名，然后使用join方法将数组转换成一个以空格分隔的字符串：

jsx
function MyComponent({ isActive, isDisabled }) {
  const classList = ['base-class'];

  if (isActive) {
    classList.push('active');
  }

  if (isDisabled) {
    classList.push('disabled');
  }

  const className = classList.join(' ');
  return <div className={className}>Content</div>;
}

使用模板字符串

ES6引入了模板字符串，这使得在字符串中插入变量或者表达式变得更加方便。模板字符串使用反引号（`）来包围字符串，并用${}来嵌入变量或表达式：

jsx
function MyComponent({ isActive, isDisabled }) {
  const className = `base-class ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
  return <div className={className}>Content</div>;
}

使用第三方库

存在一些第三方库可以简化类名的条件组合，比如classnames库，该库可以在组件中非常方便地处理动态类名。使用classnames库时，你可以这样写：

jsx
import classNames from 'classnames';

function MyComponent({ isActive, isDisabled }) {
  const className = classNames({
    'base-class': true,
    'active': isActive,
    'disabled': isDisabled
  });

  return <div className={className}>Content</div>;
}

以上就是在React中为同一个元素节点添加多个类名的几种常见方法。这些方法可以根据实际项目的需求和个人偏好选择使用。

我使用ES6 模板文字。例如：

shell
const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`

然后渲染它：

shell
<input className={classes} />

单行版本：

shell
<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />

当需要相当多的逻辑来决定使用（不）使用类时，我使用类名。一个过于简单的例子：

shell
...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);
...

也就是说，如果您不想包含依赖项，那么下面有更好的答案。

只需使用 JavaScript 即可。

shell
<li className={[activeClass, data.klass, "main-class"].join(' ')} />

如果要在对象中添加基于类的键和值，可以使用以下命令：

shell
function classNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}

const classes = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};

const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"

<li className={myClassNames} />

或者更简单：

shell
const isEnabled = true;
const isChecked = false;

<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />

康卡特

无需花哨，我正在使用 CSS 模块，而且很简单

shell
import style from '/css/style.css';

<div className={style.style1+ ' ' + style.style2} />

这将导致：

shell
<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">

换句话说，两种风格

条件句

与 if 使用相同的想法会很容易

shell
const class1 = doIHaveSomething ? style.style1 : 'backupClass';

<div className={class1 + ' ' + style.style2} />

ES6

在过去一年左右的时间里，我一直在使用模板文字，所以我觉得它值得一提，我发现它非常具有表现力并且易于阅读：

shell
`${class1} anotherClass ${class1}`

这可以通过 ES6 模板文字来实现：

shell
<input className={`base-input-class ${class1} ${class2}`}>

（为了清晰起见进行了编辑）