如何在React中动态更改组件的className？

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive
    }));
  }

  render() {
    const { isActive } = this.state;
    const className = isActive ? 'active' : 'inactive';

    return (
      <div className={className}>
        <button onClick={this.handleClick}>Toggle</button>
      </div>
    );
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive
    }));
  }

  render() {
    const { isActive } = this.state;

    return (
      <div className={isActive ? 'active' : 'inactive'}>
        <button onClick={this.handleClick}>Toggle</button>
      </div>
    );
  }
}

import classNames from 'classnames';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive
    }));
  }

  render() {
    const { isActive } = this.state;
    const className = classNames({
      active: isActive,
      inactive: !isActive
    });

    return (
      <div className={className}>
        <button onClick={this.handleClick}>Toggle</button>
      </div>
    );
  }
}