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

【问题标题】：How do I toggle a classname to a component via an action in another component?如何通过另一个组件中的操作将类名切换到组件？
【发布时间】：2017-12-26 12:44:48
【问题描述】：

我是刚接触一天的人，所以如果这是一个愚蠢的问题，我深表歉意，

当按下按钮时，我正在尝试将 css 样式的类名切换为 div，该按钮是页面中的一个单独组件，我不确定如何将两者连接起来最初使用 jquery 我有像这样：

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>

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

【问题讨论】：

在不使用 jQuery 的情况下在 React 中尝试一些东西，让我们知道你遇到了什么错误。
能否请您发布完整的 app.js？
不建议混合使用虚拟 DOM (React) 和直接操作 DOM 的东西 (jQuery)。
是的，我想通了，我想知道是否可以以“正确”的反应方式重现 jquery 函数的作用（切换类名）？

标签： reactjs react-native

【解决方案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 回调，它切换活动状态。由于状态更改，组件会重新呈现，并且活动类名称会根据状态值有条件地呈现。

【讨论】：