- 首页
- 前端开发
- 如何在 ReactJS 中使用 JQuery
如何在 ReactJS 中使用 JQuery
[英] How to use JQuery with ReactJS
本文介绍了如何在 ReactJS 中使用 JQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 ReactJS 的新手.以前我使用 jQuery 来设置我需要的任何动画或功能.但现在我正在尝试使用 ReactJS 并尽量减少使用 jQuery.
我的情况是:
我正在尝试用 ReactJS 构建一个手风琴.
<div class="head">Head 1</div><div class="body hide">Body 1</div>
<div class="accor"><div class="head">Head 1</div><div class="body hide">Body 1</div>
<div class="accor"><div class="head">Head 1</div><div class="body hide">Body 1</div>
使用 JQuery:
$('.accor > .head').on('click', function(){$('.accor > .body').slideUp();$(this).next().slideDown();});
我的问题:
我怎样才能用 ReactJS 做到这一点?
解决方案
你应该尽量避免在 ReactJS 中使用 jQuery.但是如果你真的要使用它，你可以把它放在组件的 componentDidMount() 生命周期函数中.
例如
class App 扩展 React.Component {componentDidMount() {//Jquery 在这里 $(...)...}//...}
理想情况下，您希望创建一个可重用的 Accordion 组件.为此，您可以使用 Jquery，或者只使用普通的 javascript + CSS.
class Accordion extends React.Component {构造函数(){极好的();this._handleClick = this._handleClick.bind(this);}componentDidMount() {this._handleClick();}_handleClick() {const acc = this._acc.children;for (let i = 0; i < acc.length; i++) {让 a = acc[i];a.onclick = () =>a.classList.toggle("active");}}使成为() {返回 (this._acc = a}onClick={this._handleClick}>{this.props.children}
)}}
然后你可以像这样在任何组件中使用它:
class App 扩展 React.Component {使成为() {返回 (<div><手风琴><div className="accor"><div className="head">Head 1</div><div className="body"></div>
</手风琴>
);}}
此处的 Codepen 链接:https://codepen.io/jzmmm/pen/JKLwEA?编辑=0110(我把这个链接改成了https ^)
I'm new to ReactJS. Previously I've used jQuery to set any animation or feature that I needed. But now I'm trying to use ReactJS and minimize the use of jQuery.
My Case is:
I'm trying to build an accordion with 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>
using JQuery:
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
My Question:
How can I do this with ReactJS?
解决方案
You should try and avoid jQuery in ReactJS. But if you really want to use it, you'd put it in componentDidMount() lifecycle function of the component.
e.g.
class App extends React.Component {
componentDidMount() {
// Jquery here $(...)...
}
// ...
}
Ideally, you'd want to create a reusable Accordion component. For this you could use Jquery, or just use plain 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>
)
}
}
Then you can use it in any component like so:
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 link here: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110
(I changed this link to https ^)
这篇关于如何在 ReactJS 中使用 JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
