Ik ben nieuw bij ReactJS. Voorheen heb ik jQuery gebruikt om elke animatie of functie in te stellen die ik nodig had. Maar nu probeer ik ReactJS te gebruiken en het gebruik van jQuery te minimaliseren.
Mijn zaak is:
Ik probeer een accordeon te bouwen met 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 gebruiken:
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
Mijn vraag:
Hoe kan ik dit doen met ReactJS?
Antwoord 1, autoriteit 100%
Je moet proberen jQuery in ReactJS te vermijden. Maar als u het echt wilt gebruiken, plaatst u het in de componentDidMount() levenscyclusfunctie van het onderdeel.
bijv.
class App extends React.Component {
componentDidMount() {
// Jquery here $(...)...
}
// ...
}
Idealiter zou je een herbruikbare accordeoncomponent willen maken. Hiervoor kunt u JQuery gebruiken, of gewoon javascript + CSS gebruiken.
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>
)
}
}
Dan kun je het in elk onderdeel gebruiken, zoals:
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-link hier: https://codepen.io/jzmmm/pen/JKLwEA? editors=0110
(Ik heb deze link gewijzigd in https ^)
Antwoord 2, autoriteit 90%
Ja, we kunnen jQuery gebruiken in ReactJs. Hier zal ik vertellen hoe we het kunnen gebruiken met npm.
stap 1:Ga naar je projectmap waar het bestand package.jsonaanwezig is via terminal met behulp van de opdracht cd.
stap 2:Schrijf de volgende opdracht om jQuery te installeren met npm : npm install jquery --save
stap 3:Importeer nu $van jqueryin uw jsx-bestand waar u het moet gebruiken.
Voorbeeld:
schrijf het onderstaande in 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
schrijf het onderstaande in 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>
Antwoord 3, autoriteit 31%
Stap 1:
npm install jquery
Stap 2:
touch loader.js
Ergens in uw projectmap
Stap 3:
//loader.js
window.$ = window.jQuery = require('jquery')
Stap 4:
Importeer de lader in uw rootbestand voordat u de bestanden importeert waarvoor jQuery nodig is
//App.js
import '<pathToYourLoader>/loader.js'
Stap 5:
Gebruik jQuery nu overal in uw code:
//SomeReact.js
class SomeClass extends React.Compontent {
...
handleClick = () => {
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
}
...
export default SomeClass
Antwoord 4, autoriteit 12%
Eerder had ik problemen met het gebruik van jQuerymet React js, dus ik deed de volgende stappen om het te laten werken-
-
npm install jquery --save -
Vervolgens
import $ from "jquery";
Antwoord 5, autoriteit 7%
Voer gewoon het commando
. uit om het te installeren
npm install jquery
of
yarn add jquery
dan kun je het in je bestand importeren zoals
import $ from 'jquery';
Antwoord 6, autoriteit 4%
Gebaseerd op antwoord van @David Joos
aangezien React de Virtual DOM gebruikt om de DOM-knooppunten op de webpagina te manipuleren, en de meeste andere bibliotheken mogelijk directe DOM-manipulatie doen, is de variabele die aan het venster is gekoppeld niet direct beschikbaar voor alle componenten. Dus in elke component waar jQuery vereist is, moet een variabele(‘$’ om de conventie te volgen) gelijk zijn aan window.$zoals getoond in step 4
Stap 1:
npm install jquery
Stap 2:
touch loader.js
Ergens in uw projectmap
Stap 3:
// loader.js
window.$ = window.jQuery = require('jquery')
Stap 4:
Importeer de lader kan $variabele
maken
// SomeReact.js
import '<pathToYourLoader>/loader.js'
const $ = window.$
Stap 5:
Gebruik nu jQuery overal in uw component:
// SomeReact.js
class SomeClass extends React.Compontent {
...
handleClick = () => {
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
}
...
export default SomeClass
Antwoord 7
Ik heb het bellow-script geprobeerd en het is goed voor mij.
- Installeer jQuery: NPM Installeer jQuery
- Import $ van jQuery: importeer $ van “jQuery”;
- Write Stair Code op Component Did Mount Methode
componentDidMount() {
$(document).on('click','.accor > .head',function(){
`var closestDiv = $(this).closest('.accor');`
`closestDiv.find('.body').slideToggle();`
});
}