Как использовать 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. Но если вы действительно хотите его использовать, вы должны поместить его в функцию жизненного цикла 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 ^)

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';

Answer 1

84

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

javascript jquery reactjs Н. Д. Сантос
источник

Можете

ли

Я нашел полезный учебник здесь, в этом видео - youtu.be/AMMetkCvztg

Prem

4

пожалуйста, постарайтесь не использовать jQueryвнутрь react...

quirimmo

1

См. Responsejs.org/docs/integrating-with-other-libraries.html с объяснением, почему не рекомендуется использовать jQuery внутри react. Из stackoverflow.com/a/46946447/52277

Майкл

это шатнез! Избегайте этого: D en.wikipedia.org/wiki/Shatnez

Джои Барух

Answer 2

Можете

ли

Answer 3

Я нашел полезный учебник здесь, в этом видео - youtu.be/AMMetkCvztg

Prem

Answer 4

4

пожалуйста, постарайтесь не использовать jQueryвнутрь react...

quirimmo

Answer 5

1

См. Responsejs.org/docs/integrating-with-other-libraries.html с объяснением, почему не рекомендуется использовать jQuery внутри react. Из stackoverflow.com/a/46946447/52277

Майкл

Answer 6

это шатнез! Избегайте этого: D en.wikipedia.org/wiki/Shatnez

Джои Барух

Answer 7

Вам следует избегать использования jQuery в ReactJS. Но если вы действительно хотите его использовать, вы должны поместить его в функцию жизненного цикла 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 ^)

Answer 8

Thx jzm .. Но мне все еще нужна информация о вашем коде. Я не совсем понимаю, что это значит. Можете ли вы объяснить это: 1. ref = {a => this._acc = a} 2. let 3. this._acc.children Спасибо за вашу помощь :)

ND.Santos

Answer 9

1

@ ND.Santos Прочтите эту страницу: facebook.github.io/react/docs/more-about-refs.html это синтаксис ссылки обратного вызова. Поэтому вместо ref = "accordion" или чего-то еще вы используете то, что использую я, и он возвращает узел. строка ref считается устаревшей. this._acc = вызов узла ref (т.е. вы создаете своего рода переменную, которая ссылается на узел, поэтому вы можете называть ее как хотите). «children» - это дочерние элементы внутри <Accordion>. В моей ссылке на код вы можете добавить, console.log(this._acc)чтобы увидеть, что это на самом деле.

mnsr

Answer 10

Хороший @mnsr Вы можете объяснить причину использования там метода componentDidMount ()?

Эдди Лам

Answer 11

Да, мы можем использовать 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>

Answer 12

4

Очень полезно для новичков в

react

Answer 13

21

Шаг 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

Дэвид Джус
источник

пробовал это, но не смог использовать $ни в одном компоненте.

Reema Parakh

Ладно, довольно резко сказать что-либо о своей проблеме. Может дважды проверить шаги. window.$ = ...гарантирует, что у вас есть доступ к $любому месту вашего кода, если вы правильно скомпилировали / импортировали его в корень вашего проекта.

Дэвид

1

Да, я забыл импортировать $компонент. Благодарю.

Reema Parakh

1

Я мог бы использовать jquery, import $ from 'jquery';"но я не мог отлаживать его в webstorm, пока не использовал ваш шаг 3,window.$ = window.jQuery = require('jquery')

Куронаши

Хотя это более старый пост, мне нравится этот подход, а не window. $, Поскольку он дает нам возможность просто использовать $. Специально для тех скриптов, которые нам нужно загрузить и которые нужно использовать вне React.

Гельмут Гранда

Answer 14

пробовал это, но не смог использовать $ни в одном компоненте.

Reema Parakh

Answer 15

Ладно, довольно резко сказать что-либо о своей проблеме. Может дважды проверить шаги. window.$ = ...гарантирует, что у вас есть доступ к $любому месту вашего кода, если вы правильно скомпилировали / импортировали его в корень вашего проекта.

Дэвид

Answer 16

1

Да, я забыл импортировать $компонент. Благодарю.

Reema Parakh

Answer 17

1

Я мог бы использовать jquery, import $ from 'jquery';"но я не мог отлаживать его в webstorm, пока не использовал ваш шаг 3,window.$ = window.jQuery = require('jquery')

Куронаши

Answer 18

Хотя это более старый пост, мне нравится этот подход, а не window. $, Поскольку он дает нам возможность просто использовать $. Специально для тех скриптов, которые нам нужно загрузить и которые нужно использовать вне React.

Гельмут Гранда

Answer 19

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

npm install jquery --save
Потом, import $ from "jquery";

Глянь сюда

Answer 20

5

Для его установки достаточно запустить команду

npm install jquery

или же

yarn add jquery

затем вы можете импортировать его в свой файл, например

import $ from 'jquery';

Гуру Прасад Мохапатра
источник

Получил «Узел двигателя» несовместим с этим модулем. Ожидается версия «5. *»!

Алтанай

Answer 21

Получил «Узел двигателя» несовместим с этим модулем. Ожидается версия «5. *»!

Алтанай

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

Ответы: