您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在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 ://codepen.io/jzmmm/pen/JKLwEA?editors= 0110 (我将此链接更改为https ^)

JS 2022/1/1 18:20:23 有310人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶