如何通过另一个组件中的动作将类名切换到组件？

Question

我刚开始一天的反应，所以如果这是一个愚蠢的问题，我深表歉意，

我试图在按下按钮时将css样式的类名切换为div，该按钮是页面中的单独组件，我不确定如何才能将两者连接起来。 ：

componentWillMount() {
   $(document).ready(function() {
       var header = $('header'),
           btn = $('button.toggle-nav');

       btn.on('click', function() {
           header.toggleClass('active');
       });
   });
}

但是我意识到它没有在页面的第一次加载上运行。 所有帮助将不胜感激！

我已经取出了按钮组件，现在有了类似的东西，

<header className="contain active">

  <Navigation/>

  <button className="toggle-nav">
      <span className="fa fa-bookmark-o" aria-hidden="true"></span>
  </button>

  <div className="divider"></div>

为了澄清，我试图让按钮切换标题的“活动”类名

Answer 1

您想掌握有关标头是否处于活动状态的知识。 看起来像这样。

class Test extends React.Component {
  constructor(...args) {
    super(...args)
    this.state = { active: false }
    this.onButtonClick = this.onButtonClick.bind(this)
  }

  onButtonClick() {
    this.setState((state) => ({ active: !state.active }))
  }

  render() {
    return (
      <>
        <header className={`contain ${this.state.active ? 'active' : ''}`>
        <Navigation/>
        <button className="toggle-nav" onClick={this.onButtonClick}>
          <span className="fa fa-bookmark-o" aria-hidden="true"></span>
        </button>
        <div className="divider"></div>
      </>
    )

  }
}

该按钮传递了onClick回调，该回调可切换活动状态。 由于状态更改而重新呈现组件，并且根据状态值有条件地呈现活动类名称。