基于道具的React change className

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent 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>
        <button onClick={this.handleClick}>Toggle className</button>
        <ChildComponent isActive={isActive} />
      </div>
    );
  }
}

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ isActive }) => {
  const className = isActive ? 'active' : 'inactive';
  return <div className={className}>Hello, World!</div>;
};

export default ChildComponent;