我是ReactJS的新手。以前,我使用jQuery设置所需的任何动画或功能。但是现在我正在尝试使用ReactJS并最小化jQuery的使用。
我的情况是:
我正在尝试使用ReactJS构建手风琴。
<div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div>
使用JQuery :
$('.accor > .head').on('click', function(){ $('.accor > .body').slideUp(); $(this).next().slideDown(); });
我的问题:
我该如何使用ReactJS?
您应该尝试避免在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 ^)