如何在ReactJS中使用JQuery

84

我是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？

javascript jquery reactjs

— 桑德斯
source

您能检查一下此链接是否可以帮助您进行讨论

— 。reactjs.org/ t / jquery

我在此视频中找到了有用的教程-youtu.be/AMMetkCvztg

— Prem

4

请，请不要jQuery在内部使用react...

— quirimmo '18

1

请参阅reactjs.org/docs/integrating-with-other-libraries.html并解释为什么不建议在react内部使用jQuery。来自stackoverflow.com/a/46946447/52277

— Michael Freidgeim，

这是沙特尼兹！避免它：D en.wikipedia.org/wiki/Shatnez

— Joey Baruch

69

您应该尝试避免在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 （我将此链接更改为https ^）

— 核磁共振
source

Thx jzm ..但是我仍然需要有关您的代码的信息。我不太明白这是什么意思。您能否解释一下：1. ref = {a => this._acc = a} 2.让3. this._acc.children 谢谢您4的帮助：）

— ND.Santos

1

@ ND.Santos阅读此页：facebook.github.io/react/docs/more-about-refs.html这是回调ref语法。因此，您可以使用我使用的东西代替ref =“ accordion”或其他任何东西，它会返回该节点。字符串ref被认为是旧版。this._acc =调用节点ref（即，您创建了一种引用该节点的变量-因此您可以随意调用它）。“孩子”是里面的孩子元素<Accordion>。在我的代码笔链接中，您可以添加console.log(this._acc)以查看其实际内容。

— mnsr '16

尼斯@mnsr您能解释一下在那里使用componentDidMount（）方法的原因吗？

— 艾迪·林

152

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

第1步：package.json使用cd命令，通过终端转到文件所在的项目文件夹。

步骤2：编写以下命令以使用npm安装jquery：npm install jquery --save

步骤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

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

— solanki ...
source

3

对于像我这样的js新手来说非常有用

— venugopal

21

第1步：

npm install jquery

第2步：

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

— 大卫·乔斯
source

尝试过此方法，但不能$在任何组件中使用。

— Reema Parakh，

好吧，对您的问题说任何话都非常苛刻。可能会仔细检查步骤。如果在项目的根目录中正确捆绑/导入了代码window.$ = ...，请确保您可以访问$代码中的任何位置。

— David Joos

1

是的，我忘记了导入$组件。谢谢。

— Reema Parakh

1

我可以使用jquery，import $ from 'jquery';"但无法在webstorm中调试它，直到使用了您的第3步，window.$ = window.jQuery = require('jquery')

— Kuronashi

尽管这是一篇较旧的文章，但我更喜欢这种方法，而不是window。$，因为它使我们可以灵活地使用$。特别是对于那些我们需要加载并需要在React外部使用的脚本。

— Helmut Granda

9

之前，我在将React与js一起使用jquery时遇到了问题，所以我按照以下步骤进行操作，

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

看这里

— 哈迪克·楚
source

5

要安装它，只需运行命令

npm install jquery

要么

yarn add jquery

然后可以将其导入文件中

import $ from 'jquery';

— 大师普拉萨德·莫哈帕特拉
source

得到了“引擎“节点”与此模块不兼容。预期版本为“ 5. *”！

— Altanai