如何将 Jquery 代码转换为 React JS？

Question

如何将 jQuery 代码转换为 ReactJS ？

$("#menu-toggle").click(function(e) {
 e.preventDefault();
 $("#wrapper").toggleClass("toggled");
});

Answer 1

React 以不同的方式操作你的 DOM 和事件。要实现相同的功能，您可以执行以下操作：

MyComponent extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      toggled: false
    };

    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    let isToggled = this.state.toggled;
    this.setState({ toggled: !isToggled});
  }

  render() {
    let buttonClass = (this.state.toggled) ? 'toggled' : '';
    return (
      <div className={buttonClass}>
         <button id="menu-toggle" onClick={this.toggleMenu}>Toggle Menu</button>
      </div>
    );
  }
};

基本上，与 jQuery 不同，您应该使用 state 和 props 来控制您的 DOM。请查看 React.js 文档以了解条件渲染：https ://facebook.github.io/react/docs/conditional-rendering.html