logo标签列表

如何在ReactJS中使用JQuery

javascriptjqueryreactjs
144

我刚接触 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完成这个任务？

1
你能检查一下这个链接，它可能会对你有所帮助：https://discuss.reactjs.org/t/jquery-with-react/683 - Codebrekers
2
我在这个视频中找到了一个有用的教程-https://youtu.be/AMMetkCvztg。 - Prem
16
请尽量不要在React中使用jQuery。 - quirimmo
4
请参考 https://reactjs.org/docs/integrating-with-other-libraries.html, 了解为什么不建议在 React 中使用 jQuery。来源：https://stackoverflow.com/a/46946447/52277。 - Michael Freidgeim
2
这是混纺织物！避免使用它 :D - Joey Baruch
14个回答
239

是的，我们可以在ReactJs中使用jQuery。这里我将告诉您如何使用npm来使用它。

步骤1：使用终端通过cd命令进入包含package.json文件的项目文件夹。

步骤2：键入以下命令使用npm安装jquery：

npm install jquery --save
npm i --save-dev @types/jquery

步骤3：现在，在需要使用的jsx文件中导入$自jquery。

示例：

将以下内容写入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

请将以下内容写入 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>
11
非常适合像我这样的React JS新手。 - venugopal
你知道如何在React中使用jQuery-UI吗？我没有找到React版本。 - jjzjx118_2
6
虽然这个答案在技术上可能是正确的，但我认为它没有充分提醒读者，在React等MV*库的上下文中使用原生JS或jQuery进行直接DOM操作几乎总是一个反模式。 - Alexander Nied
102

在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

1
@ND.Santos 阅读此页面：https://facebook.github.io/react/docs/more-about-refs.html 这是回调 ref 语法。所以，您使用我使用的内容而不是 ref="accordion" 或其他任何东西，并返回节点。字符串引用被认为是遗留的。this._acc = 调用节点引用（即，您创建了一种引用节点的变量 - 因此可以随意命名它）。'children' 是 <Accordion> 内部的子元素。在我的 CodePen 链接中，您可以添加 console.log(this._acc) 来查看它实际上是什么。 - mnsr
很好 @mnsr 你能解释一下为什么要在那里使用componentDidMount()方法吗？ - Eddie Lam
5
为什么应该避免尝试同时使用它们？ - Sam
2
@Sam 想知道同样的问题，并在这个问题中找到了答案。 - Bartleby
31

步骤 1：

npm install jquery

第二步：

touch loader.js

在你的项目文件夹的某个地方

第三步：

//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
12

之前，我在使用React js时遇到了与jquery结合使用的问题，因此我采取了以下步骤来解决这个问题-

  1. npm install jquery --save

  2. 然后， import $ from "jquery";

    请参见这里

7

安装它只需运行以下命令

npm install jquery

或者

yarn add jquery

然后你可以像这样在你的文件中导入它。
import $ from 'jquery';
得到了 "引擎"node"与这个模块不兼容。期望版本为"5.*"! - Altanai
1

我阅读了很多关于jQuery和ReactJS的内容；人们一直建议在ReactJS应用程序中避免使用jQuery。

如果您想创建手风琴，可以使用React-Bootstrap： React-Bootstrap手风琴组件

1
这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Shaurya Vardhan Singh
1

安装： npm install jquery --save npm i --save-dev @types/jquery

在 JSX 文件中： import $ from 'jquery';

不要使用 $(document).ready() 函数 其余部分与 jQuery 相同。将 jQuery 函数放在一个函数或 useEffect 钩子内。

测试过了。有效！！！ - Gennadij
1

React jQuery 插件是一个 Node 包，可以帮助您在 ReactJs 中轻松使用 jQuery 插件。

npm i react-jquery-plugin

或者

yarn add react-jquery-plugin

使用方法：

import React, { useEffect } from 'react'
import { $ } from 'react-jquery-plugin'
export default function App() {

    //if you're using LifeCycle methods
    // componentDidMount() {
    //     $(window).scroll(() => {
    //         // put your code here
    //     });
    // }

    // With lifeCycle Hooks
    useEffect(() => {
        $(window).scroll(() => {
            // put your code here
        });

    }, [])

    return (
        <div>
            <h1>Hello React with jQuery</h1>
        </div>
    )
}
0

$('.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;" />

你的回答可以通过添加更多支持信息来改进。请[编辑]以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Ethan
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接