javascript - 如何在 React 上切换 css 类

Question

学习 React 并尝试在单击组件中的元素时简单地切换 body 标记上的 css 类。我似乎找不到关于如何做到这一点的好例子。

这是我使用 Jquery 的方法。

function initNav() {
$(".hmbWrapper").click(function() {
    $('body').toggleClass('mobileNavActive');
});
}

React 中正确的方法是什么？

Answer 1

你可以这样做，假设你有 <div id="test">something</div>在 index.html文件。

class App extends Component {
  toggleClass = () => {
    const oldClassName = document.getElementById('test').className;
    const newClassName = oldClassName === 'red' ? 'blue' : 'red'
    document.getElementById('test').className = newClassName
  }

  render() {
    return (
      <div>
        <p>
          click toggle to change colors below
        </p>
        <button onClick={this.toggleClass}>toggle</button>
      </div>
    );
  }
}

工作示例 here .