您应该尝试避免在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 ^)