Як використовувати JQuery з ReactJS

Question 1

Я новачок у 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?

Question 2

Слід уникати jQuery в ReactJS. Але якщо ви дійсно хочете його використовувати, ви б помістили його у функцію життєвого циклу компонента компонента.

напр

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=0110 (я змінив це посилання на https ^)

Question 3

Так, ми можемо використовувати jQuery в ReactJs. Тут я розповім, як ми можемо використовувати це за допомогою npm.

Крок 1: Перейдіть до папки проекту, де присутній package.jsonфайл, за допомогою терміналу за допомогою команди cd.

Крок 2: Напишіть таку команду для встановлення jquery за допомогою npm: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>

Question 4

Крок 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

Question 5

Раніше я стикався з проблемою використання jquery з React js , тому зробив наступні кроки, щоб зробити його робочим -

npm install jquery --save
Тоді, import $ from "jquery";

Дивіться тут

Question 6

Щоб встановити його, просто запустіть команду

npm install jquery

або

yarn add jquery

тоді ви можете імпортувати його у свій файл, наприклад

import $ from 'jquery';