如何将 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

Answer 2

如前所述，由于某些原因，React 是一种不同的动物。 要使用 React Hooks 实现相同的功能，请参考以下代码：

import React,{useState} from 'react';

export default function MyComponent() {
  const[toggled,setToggled] = useState(false)
  const buttonClass = (toggled)? 'toggled':'';

  return(
    <div className={buttonClass}>
      <button 
        id="menu-toggled" 
        onClick={()=>setToggled(!toggled)}>
          press
        </button>
    </div>
  )
};

请看一下 Stackblitz 的例子