gpt4 book ai didi

javascript - 如何在 ReactJS 中使用 JQuery

转载 作者:IT王子 更新时间:2023-10-29 03:11:52 25 4
gpt4 key购买 nike

我是 ReactJS 的新手。以前我使用 jQuery 来设置我需要的任何动画或功能。但现在我正在尝试使用 ReactJS 并尽量减少 jQuery 的使用。

我的案例是:

我正在尝试使用 ReactJS 构建 Accordion 。

<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 做到这一点?

最佳答案

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

第 1 步:使用终端使用 cd 命令转到包含 package.json 文件的项目文件夹。

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

关于javascript - 如何在 ReactJS 中使用 JQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38518278/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com