Javascript 如何在 ReactJS 中使用 JQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38518278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use JQuery with ReactJS
提问by ND.Santos
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.
我是 ReactJS 的新手。以前我使用 jQuery 来设置我需要的任何动画或功能。但现在我正在尝试使用 ReactJS 并尽量减少 jQuery 的使用。
My Case is:
我的情况是：
I'm trying to build an accordion with ReactJS.
我正在尝试用 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:
使用 JQuery：
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
My Question:
我的问题：
How can I do this with ReactJS?
我怎样才能用 ReactJS 做到这一点？
采纳答案by mnsr
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.
你应该尽量避免在 ReactJS 中使用 jQuery。但是如果你真的想使用它，你可以把它放在组件的 componentDidMount() 生命周期函数中。
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.
理想情况下，您希望创建一个可重用的 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>
)
}
}
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 ^)
Codepen 链接在这里：https://codepen.io/jzmmm/pen/JKLwEA?editors =0110 （我将此链接更改为 https ^）
回答by solanki...
Yes, we can use jQuery in ReactJs. Here I will tell how we can use it using npm.
是的，我们可以在 ReactJs 中使用 jQuery。在这里我将告诉我们如何使用 npm 来使用它。
step 1:Go to your project folder where the package.jsonfile is present via using terminal using cd command.
步骤 1：package.json通过使用终端使用 cd 命令转到文件所在的项目文件夹。
step 2:Write the following command to install jquery using npm : npm install jquery --save
第 2 步：编写以下命令以使用 npm 安装 jquery：npm install jquery --save
step 3:Now, import $from jqueryinto your jsx file where you need to use.
第 3 步：现在，将$from导入jquery到您需要使用的 jsx 文件中。
Example:
例子：
write the below in index.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 + "\nStatus: " + status);
});
});
// react code here
write the below in index.html
在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>
回答by David Joos
Step 1:
第1步：
npm install jquery
Step 2:
第2步：
touch loader.js
Somewhere in your project folder
项目文件夹中的某处
Step 3:
第 3 步：
//loader.js
window.$ = window.jQuery = require('jquery')
Step 4:
第四步：
Import the loader into your root file before you import the files which require jQuery
在导入需要 jQuery 的文件之前，将加载器导入到您的根文件中
//App.js
import '<pathToYourLoader>/loader.js'
Step 5:
第 5 步：
Now use jQuery anywhere in your code:
现在在代码中的任何地方使用 jQuery：
//SomeReact.js
class SomeClass extends React.Compontent {
...
handleClick = () => {
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
}
...
export default SomeClass
回答by hardik chugh
回答by Guru Prasad mohapatra
To install it, just run the command
要安装它，只需运行命令
npm install jquery
or
或者
yarn add jquery
then you can import it in your file like
然后你可以将它导入到你的文件中
import $ from 'jquery';
