web-dev-qa-db-ja.com

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でこれを行うにはどうすればよいですか？

javascriptjqueryreactjs
37
ND.Santos

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=011 （このリンクをhttps ^に変更しました^）

38
jzm

はい、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>
81
solanki...

ステップ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
9
David Joos

以前、jqueryとReact jsを使用する際に問題に直面していました。私はそれを機能させるために次の手順を行いました

  1. npm install jquery --save

  2. 次に、import $ from "jquery";

    こちらを参照

2
hardik chugh

コマンドnpm install jqueryを実行してからnpm yarn add jqueryを実行するだけで、import $ from 'jquery'のようにファイルにインポートできます。

0
dadu mohapatra