ReactJS에서 JQuery를 사용하는 방법

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

— ND. 산토스
소스

이 링크를 확인하실 수 있습니다하면 도움이 될 수 discuss.reactjs.org/t/jquery-with-react/683

— Codebrekers

이 비디오에서 유용한 튜토리얼을 찾았습니다 -youtu.be/AMMetkCvztg

— Prem

4

사용하지 해보세요 jQuery내부 react...

— quirimmo

1

reactjs.org/docs/integrating-with-other-libraries.html 에서 react 내에서 jQuery를 사용하는 것이 권장되지 않는 이유에 대한 설명을 참조하십시오 . 에서 stackoverflow.com/a/46946447/52277

— 마이클 Freidgeim

샤트 네즈입니다! 그것을 피할 : D en.wikipedia.org/wiki/Shatnez를

— 조이 바룩에게

69

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=0110 (이 링크를 https ^로 변경했습니다.)

— mnsr
소스

Thx jzm ..하지만 여전히 귀하의 코드에 대한 정보가 필요합니다. 그게 무슨 뜻인지 잘 모르겠습니다. 당신은 이것에 대해 설명 할 수 : 1. 심판 = {A => this._acc = A} 2. 하자 3. this._acc.children 감사 4 도움 :

— ND.Santos을

1

@ ND.Santos이 페이지 읽기 : facebook.github.io/react/docs/more-about-refs.html 이것이 콜백 참조 구문입니다. 따라서 ref = "accordion"또는 기타 대신 내가 사용하는 것을 사용하고 노드를 반환합니다. 문자열 참조는 레거시로 간주됩니다. this._acc = 노드 참조 호출 (즉, 노드를 참조하는 일종의 변수를 생성하여 원하는대로 호출 할 수 있음). 'children'은 내부의 자식 요소 <Accordion>입니다. 내 코드 펜 링크에서 console.log(this._acc)실제로 무엇인지 추가 할 수 있습니다 .

— mnsr

좋은 @mnsr componentDidMount () 메서드를 사용하는 이유를 설명해 주시겠습니까?

— Eddie Lam

152

예, ReactJ에서 jQuery를 사용할 수 있습니다. 여기서 npm을 사용하여 어떻게 사용할 수 있는지 설명하겠습니다.

1 단계 :package.json cd 명령을 사용하여 터미널을 사용하여 파일이 있는 프로젝트 폴더로 이동합니다 .

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>

— 솔란 키 ...
소스

3

나 같은 반응 js 초보자에게 매우 유용합니다

— venugopal

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';"있지만 3 단계를 사용할 때까지 webstorm에서 디버그 할 수 없었습니다.window.$ = window.jQuery = require('jquery')

— Kuronashi

이것은 오래된 게시물이지만 window. $보다는이 접근 방식을 좋아합니다. $를 사용할 수있는 유연성을 제공하기 때문입니다. 특히로드해야하고 React 외부에서 사용해야하는 스크립트를위한 것입니다.

— Helmut Granda

9

이전 에는 React js 와 함께 jquery 를 사용하는 데 문제가 있었으므로 작동하도록 다음 단계를 수행했습니다.

npm install jquery --save
그때, import $ from "jquery";

여길 봐

— 하딕 추
소스

5

설치하려면 다음 명령을 실행하십시오.

npm install jquery

또는

yarn add jquery

그런 다음 파일로 가져올 수 있습니다.

import $ from 'jquery';

— 구루 프라 사드 모하 파트라
소스

"엔진"노드 "가이 모듈과 호환되지 않습니다. 예상 버전"5. * "!

— Altanai