如何在ReactJS中使用JQuery
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在ReactJS中使用JQuery相关的知识，希望对你有一定的参考价值。
我是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（）生命周期函数中。
EG
class App extends React.Component {
componentDidMount() {
// Jquery here $(...)...
}
// ...
}
理想情况下，您需要创建可重复使用的Accordion组件。为此你可以使用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 ^）
是的，我们可以在ReactJs中使用jQuery。在这里，我将告诉我们如何使用npm来使用它。
步骤1：使用cd命令转到使用终端存在package.json文件的项目文件夹。
步骤2：编写以下命令以使用npm：npm install jquery --save安装jquery
第3步：现在，将$中的jquery导入到您需要使用的jsx文件中。
例：
在index.jsx中写下面的内容
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
// react code here
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "
Status: " + status);
});
});
// react code here
在index.html中写下面的内容
<!DOCTYPE html>
<html>
<head>
<script src="index.jsx"></script>
<!-- other scripting files -->
</head>
<body>
<!-- other useful tags -->
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<button>Get External Content</button>
</body>
</html>
步骤1：
npm install jquery
第2步：
touch loader.js
项目文件夹中的某个位置
第3步：
//loader.js
window.$ = window.jQuery = require('jquery')
第4步：
在导入需要jQuery的文件之前，将加载器导入到根文件中
//App.js
import '<pathToYourLoader>/loader.js'
第5步：
现在在代码中的任何地方使用jQuery：
//SomeReact.js
class SomeClass extends React.Compontent {
...
handleClick = () => {
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
}
...
export default SomeClass
早些时候，我在使用jquery和React js时遇到了问题，所以我按照以下步骤使其工作 -
npm install jquery --save- 然后，
import $ from "jquery";See here
只需运行命令npm install jquery然后npm yarn add jquery然后你可以在你的文件中导入它像'jquery'中的import $;
以上是关于如何在ReactJS中使用JQuery的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段
如何将事件侦听器添加到 ag 网格单元格内的元素（使用 js 或 jquery，不是 angular，不是 reactjs，不是 vue）