react className 多个 class

在React中设置多个`className`（通常称为`class`）时，可以利用第三方库`classnames`来更方便地管理类名。以下是使用`classnames`的方法[^1]：

const classNames = require('classnames');

// 定义一个名为Button的React组件
class Button extends React.Component {
  // ...
  render() {
    const btnClass = classNames({
      'btn': true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

// 如果不需要第三方库，也可以直接使用数组连接类名，但推荐使用classnames以保持代码简洁和兼容性
// class ButtonWithoutClassnames extends React.Component {
//   render() {
//     let classes = [];
//     classes.push('btn');
//     if (this.state.isPressed) classes.push('btn-pressed');
//     if (!this.state.isPressed && this.state.isHovered) classes.push('btn-over');
//     return <button className={classes.join(' ')}>...</button>;
//   }
//}

要创建一个简单的带有多类名的`Title`组件[^2]，你可以按照下面的方式：

class Title extends React.Component {
  render() {
    return <h3 className={"welcome " + (this.props.className ? this.props.className : "")}>Welcome to React</h3>;
  }
}

在这个例子中，`props.className`会被添加到默认的"welcome"类名之前。