如何在 ReactJS 中使用 JQuery

IT技术 javascript jquery reactjs
2021-02-05 09:50:12

我是 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 做到这一点？

6个回答

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

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

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

第 3 步：现在，将$from导入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>
对于像我这样的 react js 新手非常有用
2021-03-17 09:50:12
你知道如何在 React 中使用 jquery-ui 吗？我没有找到反应版本
2021-03-21 09:50:12

你应该尽量避免在 ReactJS 中使用 jQuery。但是如果你真的想使用它，你可以把它放在组件的 componentDidMount() 生命周期函数中。

例如

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 ^）

为什么要避免尝试将它们一起使用？
2021-03-12 09:50:12
很好@mnsr 你能解释一下在那里使用 componentDidMount() 方法的原因吗？
2021-03-25 09:50:12
Thx jzm .. 但我仍然需要关于你的代码的信息。我不太明白这是什么意思。你能解释一下：1. ref={a => this._acc = a} 2. let 3. this._acc.children 谢谢 4 你的帮助 :)
2021-03-30 09:50:12
@ND.Santos 阅读此页面：facebook.github.io/react/docs/more-about-refs.html这是回调引用语法。所以，而不是 ref="accordion" 或其他什么，你使用我使用的，它返回节点。字符串 ref 被认为是遗留的。this._acc = 调用节点引用（即，您创建了一种引用该节点的变量 - 因此您可以随意调用它）。'children' 是里面的 children 元素<Accordion>。在我的 codepen 链接中，您可以添加console.log(this._acc)以查看它实际上是什么。
2021-04-07 09:50:12
@Sam 想知道同样的事情并找到了该问题的答案。
2021-04-08 09:50:12

步骤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
试过这个，但不能$在任何组件中使用。
2021-03-14 09:50:12
我可以使用 jquery，import $ from 'jquery';"但我无法在 webstorm 中调试它，直到我使用了你的第 3 步，window.$ = window.jQuery = require('jquery')
2021-03-20 09:50:12
好吧，对你的问题说任何话都非常苛刻。可以仔细检查步骤。如果您在项目的根目录中正确捆绑/导入了代码，则window.$ = ...确保您可以访问$代码中的任何位置。
2021-03-27 09:50:12
虽然这是一篇较旧的文章，但我喜欢这种方法而不是 window.$，因为它让我们可以灵活地使用 $。专门针对那些我们需要加载，需要在 React 之外使用的脚本。
2021-03-27 09:50:12
是的，我忘了$在组件中导入。谢谢。
2021-04-10 09:50:12

早些时候，我在将jquery与React js一起使用时遇到了问题，所以我按照以下步骤使其工作-

  1. npm install jquery --save

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

    看这里

要安装它，只需运行命令 

npm install jquery

或者

yarn add jquery

然后你可以将它导入到你的文件中

import $ from 'jquery';
得到“引擎“节点”与此module不兼容。预期版本“5.*”！
2021-04-08 09:50:12
其它你可能感兴趣的问题
上一篇JSON 格式的 POST 数据 下一篇如何转到页面上的特定元素？