☰

ReactJSでJQueryを使用する方法 質問する

tag-icon • tag-icon javascript jquery reactjs
ReactJSでJQueryを使用する方法 質問する

私は 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 を使用して jQuery を使用する方法を説明します。

ステップ1：package.jsonターミナルで cd コマンドを使用して、ファイルが存在するプロジェクト フォルダーに移動します。

ステップ2：npm を使用して jquery をインストールするには、次のコマンドを記述します。

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

ステップ3:次に、使用する必要がある jsx ファイルに$インポートします。jquery

例:

以下に記入してくださいインデックス.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>

おすすめ記事