如何将 JQuery 与 ReactJS 一起使用

javascript jquery reactjs

2022-08-30 04:52:01

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

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

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

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

第 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

在索引中写下以下内容.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>

答案 2

你应该尝试在 ReactJS 中避免 jQuery。但是如果你真的想使用它，你可以把它放在组件的conceptDidMount（）生命周期函数中。

例如：

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

此处的编解码器链接： https://codepen.io/jzmmm/pen/JKLwEA?editors=0110