如何向 ReactJS 组件添加或删除多个类？

在 ReactJS 中，我们可以使用类名来对组件进行样式化。有时候我们需要给组件同时添加或删除多个类名，本文将分享两种常见的方法。

方法一：使用字符串拼接

我们可以使用字符串拼接的方式来添加或删除多个类名。例如，要给一个组件添加 class1 和 class2 两个类名，可以这样写：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: false };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ active: true });
  }
  
  render() {
    const classNames = 'my-component ' + (this.state.active ? 'class1 class2' : '');
    return (
      <div className={classNames} onClick={this.handleClick}>Hello World</div>
    );
  }
}

上述代码中，我们首先定义了一个变量 classNames，用来存储组件的类名。如果 active 状态为 true，那么就通过字符串拼接的方式将 class1 和 class2 添加到 my-component 上面。

方法二：使用 classnames 库

在 ReactJS 中，我们可以使用 classnames 库来方便地处理类名。这个库提供了一组方便的函数，可以快速地合并类名。例如，要给一个组件添加 class1 和 class2 两个类名，可以这样写：

import classNames from 'classnames';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: false };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ active: true });
  }
  
  render() {
    const classNames = classNames('my-component', { class1: this.state.active, class2: this.state.active });
    return (
      <div className={classNames} onClick={this.handleClick}>Hello World</div>
    );
  }
}

以上代码中，我们首先通过 import 语句引入了 classnames 库。然后在组件中，我们使用 classNames 函数来合并类名。classNames 函数的第一个参数是必须的，用来指定组件的基础类名；然后我们可以传递一个对象作为第二个参数，用来指定需要合并的类名和其条件。

总结

本文介绍了两种向 ReactJS 组件添加或删除多个类名的方法：字符串拼接和使用 classnames 库。这两种方法各有优缺点，开发者可以在具体情况下选择合适的方式。