如何在 ReactJS 中使用 JQuery

小开

最佳答案

您应该尝试在 ReactJS 中避免使用 jQuery。但是如果您真的想要使用它，您应该将它放在组件的 Component entDidMount ()生命周期函数中。

例如:。

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>
);
}
}

这里的代码链接: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110

小开

是的，我们可以在 ReactJs 中使用 jQuery。

步骤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 + "\nStatus: " + status);
});
});


// react code here

用 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>

小开

第一步:

npm install jquery

第二步:

touch loader.js

项目文件夹中的某个地方

第三步:

//loader.js
window.$ = window.jQuery = require('jquery')

第四步:

在导入需要 jQuery 的文件之前，将加载程序导入到根文件中

//App.js
import '<pathToYourLoader>/loader.js'

第五步:

现在在代码中的任何位置使用 jQuery:

//SomeReact.js
class SomeClass extends React.Compontent {


...


handleClick = () => {
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
}


...


export default SomeClass

小开

早些时候，我在使用 Jquery和 反应 J时遇到了问题，所以我按照以下步骤使它工作-

npm install jquery --save
然后是 import $ from "jquery";

看这里

小开

要安装它，只需运行命令

npm install jquery

或者

yarn add jquery

然后你可以把它导入你的文件

import $ from 'jquery';

小开

我尝试了下面的脚本和它的工作对我来说很好。

安装 jQuery: npm Install jQuery
从 jQuery 导入 $: 从“ jQuery”导入 $;
在组件安装方法中编写以下代码

componentDidMount() {
$(document).on('click','.accor >  .head',function(){
`var closestDiv = $(this).closest('.accor');`
`closestDiv.find('.body').slideToggle();`
});
}

小开

你可以在使用 JQuery 和 React 的时候不用这样做:

import $ from 'jquery'

为此，您需要转到终端中 package.json 所在的根文件夹并键入以下命令:

yarn add -D expose-loader

然后将这个配置添加到 webpack.config.js 文件:

  module: {
rules: [
{test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery'}
]
}

这将 $和 jQuery 公开到全局范围，因此您可以在代码中的任何地方使用它们。

不要忘记像下面这样将 Jquery 添加到您的供应商包中:

module.exports = config({
entry: {
vendor: [
'jquery'
]
}
...

现在您可以使用 jquery 而无需在代码中导入它，因为这就是 expose-loader为您做的。

为了测试它是否正常工作，将它添加到项目中的任何文件:

console.log($);

并在浏览器控制台中看到它将显示 $变量而不会抛出错误。

小开

我读了很多关于 jQuery 和 ReactJS 的文章; 他们总是被建议避免在 ReactJS 应用程序中使用 jQuery。

如果你想创建一个手风琴，你可以使用 React-Bootstrap: 手风琴组件

小开

使用诸如 bootstrap 或 MUI 之类的样式库来实现这一点。反应有反应带，一个坚实的自举/反应组件包。两种样式框架都可以使用，但是将它们混合使用并不是一个好的做法。我会推荐使用反应带，因为我相信它有更好的反应组件，个人喜好。

如果您继续进行响应，您会发现 jquery 不是最佳解决方案。它可能会工作，但是因为 response 和 jquery 都是从 dom 工作(并且 response 管理一个影子 dom) ，所以可能会有问题。有人提到使用反应生命周期在挂载或加载时使用库。对于我们这些使用较新的功能组件和钩子(反应16 + 我相信) ，我们可以使用 useEffect 钩子调用它的负载。

useEffect(() => {
// use jquery here if you must, this way the component is loaded
//and the dom matches whats in react (or should)
}, []);

样式和组件库是最佳实践。出于同样的原因，您可以使用 formik 来管理表单组件(不必每次都重新创建轮子/表单) ，对于样式组件库也是如此。

Https://www.npmjs.com/package/reactstrap

Https://getbootstrap.com/docs/5.0/components/accordion/ Https://mui.com/components/accordion/

小开

如果您需要为所有 React App 添加 jQuery 代码，那么您应该在组件的 Component entDidMount ()生命周期函数中添加 jQuery:

class App extends React.Component {
componentDidMount() {
// Jquery Code for All components of the React App
}
}

但是，如果您需要在 App 中的每个组件中使用 jQuery 代码，那么您应该将代码放在 useEffect ()中

const ComponentExample = () => {


useEffect(() => {
// Jquery Code for this component
})


return (
<div>
<h1></h1>
</div>
)
}

小开

如果任何 jQuery 插件需要 React 和 jQuery，最好不要混用。它不会像 jQuery 中的事件处理程序(比如 onclick)那样工作。

点击这里查看精彩答案: 在 React 中使用 Jquery 的正确方法是什么？

如果你真的要把两者混在一起，请看这里: Https://reactjs.org/docs/integrating-with-other-libraries.html

小开

$('.simpleCart_input').blur(function() {
var val = $.trim(this.value);
$(this).wrap($('<span/>', {
'class': $(this).attr('class'),
html: val
})).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="simpleCart_input" style="background-color:yellow; color:balck; border-radius:6px; height:90px; width:100px;" />