저는 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로 어떻게 할 수 있습니까?
답변
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 ^로 변경했습니다.)
답변
예, 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>
답변
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
답변
이전 에는 React js 와 함께 jquery 를 사용하는 데 문제가 있었으므로 작동하도록 다음 단계를 수행했습니다.
-
npm install jquery --save
-
그때,
import $ from "jquery";
답변
설치하려면 다음 명령을 실행하십시오.
npm install jquery
또는
yarn add jquery
그런 다음 파일로 가져올 수 있습니다.
import $ from 'jquery';