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不同，你应该用状态和道具控制你的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 example

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

2 个答案: