使用状态。Reacts 文档在这里。

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);
        this.state = {
            active: false,
        };
    }
    toggleClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'your_className': null} 
                onClick={this.toggleClass} 
            >
                <p>{this.props.text}</p>
            </div>
        )
  }
}

class Test extends Component {
    render() {
        return (
            <div>
                <MyComponent text={'1'} />
                <MyComponent text={'2'} />
            </div>
        );
    }
}

你也可以用hooks做到这一点。

function MyComponent (props) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
    <div 
      className={isActive ? 'your_className': null} 
      onClick={toggleClass} 
    >
      <p>{props.text}</p>
    </div>
   );
}  

我更喜欢在内联 if 语句中使用 "&&" -operator。在我看来，它以这种方式提供了更清晰的代码库。

通常你可以做这样的事情

render(){
return(
  <div>
    <button className={this.state.active && 'active'}
      onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
  </div>
)
}

请记住箭头函数是 ES6 特性，并记住在类构造函数(){}中设置“this.state.active”值

this.state = { active: false }

或者如果你想在 JSX 中注入 css 你可以这样做

<button style={this.state.active && style.button} >button</button>

你可以声明样式json变量

const style = { button: { background:'red' } }

记得在 JSX 样式表上使用驼峰命名法。

好吧，您的 addActiveClass 需要知道点击了什么。这样的事情可以工作（请注意，我已将哪些 div 处于活动状态的信息添加为状态数组，并且 onClick 现在将单击的信息作为参数传递，然后状态相应地更新 - 当然有更聪明的方法这样做，但你明白了）。

class Test extends Component(){

  constructor(props) {
    super(props);
    this.state = {activeClasses: [false, false, false]};
    this.addActiveClass= this.addActiveClass.bind(this);
  }

  addActiveClass(index) {
    const activeClasses = [...this.state.activeClasses.slice(0, index), !this.state.activeClasses[index], this.state.activeClasses.slice(index + 1)].flat();
    this.setState({activeClasses});
  }

  render() {
    const activeClasses = this.state.activeClasses.slice();
    return (
      <div>
        <div className={activeClasses[0]? "active" : "inactive"} onClick={() => this.addActiveClass(0)}>
          <p>0</p>
        </div>
        <div className={activeClasses[1]? "active" : "inactive"} onClick={() => this.addActiveClass(1)}>
          <p>1</p>
        </div>
          <div  onClick={() => this.addActiveClass(2)}>
          <p>2</p>
        </div>
      </div>
    );
  }
}

React 有组件状态的概念，所以如果你想切换它，做一个setState：

constructor(props) {
  super(props);

  this.addActiveClass= this.addActiveClass.bind(this);
  this.state = {
    isActive: false
  }
}

addActiveClass() {
  this.setState({
    isActive: true
  })
}

在您的组件中用于this.state.isActive渲染您需要的内容。

当您想在组件#1 中设置状态并在组件#2 中使用它时，这会变得更加复杂。只需深入研究react单向数据流和可能帮助您处理它的 redux。