React에서 JQuery를 사용하는 방법JS
리액트J는 처음이에요.이전에는 jQuery를 사용하여 필요한 애니메이션이나 기능을 설정했습니다.하지만 지금은 ReactJs를 사용하여 jQuery 사용을 최소화하려고 합니다.
케이스:
리액트 JS와 아코디언을 만들려는 중이야
<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를 사용할 수 있습니다.여기에서는 npm을 사용하여 사용하는 방법을 설명하겠습니다.
1단계: 프로젝트 폴더로 이동하여package.jsoncd 명령어를 사용하여 단말기를 사용하여 파일이 존재합니다.
2단계: 다음 명령을 작성하여 npm을 사용하여 jquery를 설치합니다.
npm install jquery --save
npm i --save-dev @types/jquery
순서 3: Import 합니다.$부터jqueryjsx 파일을 사용할 수 있습니다.
예:
index.dexx에 다음 내용을 기입합니다.
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.timeout에 다음 내용을 기재합니다.
<!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>
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>
);
}
}
코드 페이지 링크: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110
순서 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 할 수 있습니다.
import $ from 'jquery';
jQuery and React에 대해서 많이 읽었어요.JS; ReactJS 앱에서 jQuery를 사용하지 말 것을 항상 권해왔습니다.
아코디언을 작성하려면 React-Bootstrap: React-Bootstrap Acodion 컴포넌트를 사용합니다.
나는 아래 대본으로 시도받았고 그것은 나에게 잘 작동했다.
- jQuery 설치 : npm install jquery
- jQuery에서 $ Import : "jquery"에서 $ Import;
- 컴포넌트 DID 마운트 방법에 벨로우 코드
componentDidMount() {
$(document).on('click','.accor > .head',function(){
`var closestDiv = $(this).closest('.accor');`
`closestDiv.find('.body').slideToggle();`
});
}
JQuery를 React와 함께 사용하면 다음 작업을 수행하지 않아도 됩니다.
import $ from 'jquery'
이렇게 하려면 패키지가 있는 루트 폴더로 이동해야 합니다.단말기에 json을 입력하고 다음 명령을 입력합니다.
yarn add -D expose-loader
다음 설정을 webpack.config.js 파일에 추가합니다.
module: {
rules: [
{test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery'}
]
}
그러면 $ 및 jQuery가 글로벌 스코프에 노출되므로 코드 내 어디에서나 사용할 수 있습니다.
다음과 같이 Jquery를 벤더 번들에 추가하는 것을 잊지 마십시오.
module.exports = config({
entry: {
vendor: [
'jquery'
]
}
...
jquery를 사용할 수 .jquery는 jquery를 에 Import하지 않아도 됩니다.expose-loader너한테는 그래.
정상적으로 동작하는 것을 테스트하려면 , 프로젝트의 임의의 파일에 다음의 항목을 추가합니다.
console.log($);
브라우저 콘솔에서 $ 변수가 오류 발생 없이 표시되는 것을 확인합니다.
이를 위해 부트스트랩이나 MUI와 같은 스타일 라이브러리를 사용합니다.react에는 리액트 스트랩이 있습니다.이것은 솔리드 부트스트랩/스트랩 컴포넌트 패키지입니다.스타일 프레임워크는 둘 다 사용할 수 있지만 혼합하는 것은 좋은 방법이 아닙니다.리액션 스트랩은 리액션 컴포넌트가 뛰어나고 개인 취향이기 때문에 사용을 권장합니다.
계속 반응하면 jquery가 최선의 해결책이 아니라는 것을 알게 될 것입니다.동작할 수도 있지만 리액트와 jquery가 돔에서 동작하지 않기 때문에(및 리액트는 섀도우 돔을 관리합니다) 문제가 있을 수 있습니다.누군가가 리액션 라이프 사이클을 사용하여 마운트 또는 로드 시 라이브러리를 사용할 수 있다고 언급했습니다.새로운 기능 컴포넌트와 훅(react 16+)을 사용하고 있는 사람에게는 use Effect 훅을 사용하여 호출할 수 있습니다.
useEffect(() => {
// use jquery here if you must, this way the component is loaded
//and the dom matches whats in react (or should)
}, []);
스타일 및 컴포넌트 라이브러리가 베스트 프랙티스입니다.폼을 사용하여 폼 구성요소를 관리하는 것과 같은 이유로(매번 휠/양식을 다시 작성할 필요가 없음) 스타일 구성요소 라이브러리에서도 마찬가지입니다.
https://www.npmjs.com/package/reactstrap
https://getbootstrap.com/docs/5.0/components/accordion/ https://mui.com/components/accordion/
jQuery 플러그인에 필요한 경우 React와 jQuery를 함께 사용하지 않는 것이 가장 좋습니다.jQuery의 이벤트 핸들러(온클릭 등)는 동작하지 않기 때문에 동작하지 않습니다.
여기서 훌륭한 답변을 보실 수 있습니다.React에서 Jquery를 사용하는 올바른 방법은 무엇입니까?
이 둘을 혼재시킬 필요가 있는 경우는, https://reactjs.org/docs/integrating-with-other-libraries.html 를 참조해 주세요.
$('.simpleCart_input').blur(function() {
var val = $.trim(this.value);
$(this).wrap($('<span/>', {
'class': $(this).attr('class'),
html: val
})).remove();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="simpleCart_input" style="background-color:yellow; color:balck; border-radius:6px; height:90px; width:100px;" />모든 React App에 jQuery 코드를 추가해야 할 경우 컴포넌트의 componentDidMount() 라이프 사이클 함수에 jQuery를 추가해야 합니다.
class App extends React.Component {
componentDidMount() {
// Jquery Code for All components of the React App
}
}
단, 앱의 각 컴포넌트에 jQuery 코드를 사용해야 하는 경우 useEffect()에 코드를 입력해야 합니다.
const ComponentExample = () => {
useEffect(() => {
// Jquery Code for this component
})
return (
<div>
<h1></h1>
</div>
)
}
언급URL : https://stackoverflow.com/questions/38518278/how-to-use-jquery-with-reactjs
'programing' 카테고리의 다른 글
| Swift 목록에서 줄 구분 기호를 삭제하는 방법ForEach를 사용하지 않는 UI? (0) | 2023.04.10 |
|---|---|
| WPF에서의 컨트롤 템플릿과 DataTemplate의 차이 (0) | 2023.04.10 |
| 단순 ng-repeat용 단방향 바인딩? (0) | 2023.04.05 |
| TypeScript의 public static const (0) | 2023.04.05 |
| React 컴포넌트에서 Markdown을 렌더링하려면 어떻게 해야 합니까? (0) | 2023.04.05 |