react 中使用多个className

在React中设置多个`className`（通常称为`class`）时，可以利用第三方库`classnames`来更方便地管理类名。以下是使用`classnames`的方法[^1]： ```jsx 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]，你可以按照下面的方式： ```jsx class Title extends React.Component { render() { return <h3 className={"welcome " + (this.props.className ? this.props.className : "")}>Welcome to React</h3>; } } ``` 在这个例子中，`props.className`会被添加到默认的"welcome"类名之前。