Как использовать JQuery на ReactJS

Я новичок в ReactJS. До сих пор я использую JQuery для установки любой анимации или какой-либо функции, которая мне нужна. Но сейчас я пытаюсь использовать ReactJS и минимизировать с помощью JQuery.

Мой случай это:
Я пытаюсь построитьсобственный аккордеон, с 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();
});

Мой вопрос:
1. Как это сделать в ReactJS?


Спасибо, прежде чем

 quirimmo23 дек. 2018 г., 17:23
пожалуйста, постарайтесь не использоватьjQuery внутриreact...
 Prem16 мая 2017 г., 21:32
Я нашел полезное руководство здесь в этом видео -youtu.be/AMMetkCvztg
 Codebrekers22 июл. 2016 г., 06:42
Можете ли вы проверить эту ссылку, может помочь вамdiscuss.reactjs.org/t/jquery-with-react/683

Ответы на вопрос(4)

Решение Вопроса

но хотите его использовать, вы бы поместили его в функцию жизненного цикла componentDidMount () компонента.

например

class App extends React.Component {
  componentDidMount() {
    // Jquery here $(...)...
  }

  // ...
}

В идеале вы хотели бы создать повторно используемый компонент Accordion. Для этого вы можете использовать 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 ^)

 ND.Santos22 июл. 2016 г., 08:43
Thx JZM .. Но мне все еще нужна информация о вашем коде. Я не совсем понимаю, что это значит. Можете ли вы объяснить это: 1.ref = {a => this._acc = a} 2.позволять 3.this._acc.children  Спасибо 4 ваша помощь :)
 jzm22 июл. 2016 г., 09:48
@ ND.Santos Читать эту страницу:facebook.github.io/react/docs/more-about-refs.html это синтаксис обратного вызова. Таким образом, вместо ref = "accordion" или чего-либо еще, вы используете то, что я использую, и он возвращает узел. Строка ref считается устаревшей. this._acc = вызывая ссылку на узел (т. е. вы создаете переменную, которая ссылается на узел - так что вы можете вызывать ее как хотите). «дети» это дочерние элементы внутри<Accordion>, В мою ссылку вы можете добавитьconsole.log(this._acc) чтобы увидеть, что это на самом деле.

JQuery сРеагировать JSпоэтому я сделал следующие шаги, чтобы сделать это

npm install jquery --save

Затем,import $ from "jquery";

Посмотреть здесь

 Armen Asaduryan23 апр. 2019 г., 12:06
это работает для меня

мы можем использовать 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>
 venugopal06 сент. 2017 г., 02:29
Очень полезно для реагирования JS новичков, как я
 Gayan Kavirathne15 мая 2017 г., 20:46
Спасибо Работаю !!! :)

Шаг 1:

Шаг 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
 Reema Parakh29 дек. 2018 г., 13:41
пробовал это, но не мог использовать$ в любом компоненте.
 David Joos08 янв. 2019 г., 10:41
Ладно, довольно грубо сказать что-нибудь о твоей проблеме. Может дважды проверить шаги.window.$ = ... гарантирует, что у вас есть доступ к$ в любом месте вашего кода, если вы правильно связали / импортировали его в корневой каталог вашего проекта.
 Reema Parakh08 янв. 2019 г., 10:49
Да я забыл импортировать$ в компоненте. Благодарю.

Ваш ответ на вопрос