如何在ReactJS中使用JQuery

如何在ReactJS中使用JQuery

您应该尝试避免在ReactJS中使用jQuery。但是，如果您真的想使用它，则可以将其放入组件的componentDidMount（）生命周期函数中。

例如

class App extends React.Component {  componentDidMount() {    // Jquery here $(...)...  }  // ...}

理想情况下，您想创建一个可重用的手风琴组件。为此，您可以使用Jquery，也可以仅使用普通的javascript + CSS。

class Accordion extends React.Component {  constructor() {    super();    this._handleClick = this._handleClick.bind(this);  }  componentDidMount() {    this._handleClick();  }  _handleClick() {    const acc = this._acc.children;    for (let i = 0; i < acc.length; i++) {      let a = acc[i];      a.onclick = () => a.classList.toggle("active");    }  }  render() {    return (      <div         ref={a => this._acc = a}         onClick={this._handleClick}>        {this.props.children}      </div>    )  }}

然后，您可以在任何组件中使用它，如下所示：

class App extends React.Component {  render() {    return (      <div>        <Accordion>          <div className="accor"> <div className="head">Head 1</div> <div className="body"></div>          </div>        </Accordion>      </div>    );  }}

此处的Codepen链接：https
://prepen.io/jzmmm/pen/JKLwEA?editors
= 0110 （我将此链接更改为https ^）