在 ReactJS 中的 className 内添加条件

在 ReactJS 中，我们通常使用 className 来设置元素的样式。有时，我们需要根据不同的条件来设置不同的样式，这时我们怎么做呢？下面介绍几种方法。

使用条件运算符

我们可以使用 JavaScript 的条件运算符 ? : 来实现。比如，我们有一个组件：

function MyComponent(props) {
  const isActive = props.isActive;
  return (
    <div className={`my-class${isActive ? ' active' : ''}`}>
      My Component
    </div>
  );
}

isActive 为 true 时，会设置 active 样式。在 className 中，我们使用了模板字符串、条件判断和字符串拼接。这种方式简单易懂，但是样式类比较少时可读性好。

使用数组和 join

我们可以使用数组和 join 方法来实现。比如：

function MyComponent(props) {
  const isActive = props.isActive;
  const classNames = ['my-class'];
  if (isActive) {
    classNames.push('active');
  }
  return (
    <div className={classNames.join(' ')}>
      My Component
    </div>
  );
}

这种方式用了一个数组 classNames 存储潜在要添加的样式类，根据需求动态 push 进去。最后用 join 方法将数组连接成一个字符串，以空格为分隔符。这种方式可读性比较好，但是样式类比较多时代码冗长。

使用 classnames 库

我们也可以使用第三方库 classnames 来实现，classnames 支持将多个参数组合成一个 className 字符串。这个库可以用 npm 下载，然后使用方法如下：

import classNames from 'classnames';
function MyComponent(props) {
  const isActive = props.isActive;
  return (
    <div className={classNames('my-class', { 'active': isActive })}>
      My Component
    </div>
  );
}

classNames 函数可以传递多个参数，它会将所有参数都展开并连接成一个字符串，中间使用空格分隔。这里我们也用了一个对象，根据 isActive 布尔值设置 active 样式。这种方式简洁明了，也适用于样式类比较多的情况。

以上就是在 ReactJS 中的 className 内添加条件的几种方法，根据具体需求选择适合的方式即可。

参考文献

• React official website
• classnames