Wann und wie sollten Sie jQuery mit ReactJS verwenden?

JQuery mit ReactJS verwenden

Einführung

ReactJS ist ein beliebtes JavaScript-Framework, das Debatten über die mögliche Redundanz von ausgelöst hat jQuery in der Webentwicklung. Obwohl beide Technologien ihre Stärken haben, kann es Fälle geben, in denen es von Vorteil ist, die Fähigkeiten von jQuery in ReactJS zu nutzen.

Szenario: Erstellen eines Akkordeons mit jQuery

In diesem Szenario Der Benutzer möchte eine Akkordeonkomponente mit jQuery implementieren, was das Erweitern oder Reduzieren eines Körpers durch Klicken auf den entsprechenden Kopf beinhaltet.

jQuery-Implementierung:

<code class="javascript">$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});</code>

ReactJS-Äquivalent

Um eine ähnliche Funktionalität in ReactJS zu erreichen, können wir die Statusverwaltung verwenden, um die Sichtbarkeit jedes Körpers umzuschalten.

Statusverwaltung:
In ReactJS ist state ein Objekt, das die aktuellen Werte der Komponente enthält und deren Verhalten bestimmt. Wir können den Anfangszustand des Akkordeons wie folgt definieren:

<code class="javascript">const Accordion = () => {
  const [accordions, setAccordions] = useState([
    { id: 1, title: 'Head 1', content: 'Body 1', visible: false },
    // ...
  ]);
};
</code>

Ereignishandler:
Wir definieren einen Ereignishandler, der das Klickereignis auf dem Kopfelement verarbeitet und das aktualisiert geben Sie entsprechend an.

<code class="javascript">const handleClick = (index) => {
  // Clone the current state to avoid mutations
  const newAccordions = [...accordions];
  newAccordions[index].visible = !newAccordions[index].visible;
  setAccordions(newAccordions);
};</code>

Rendering des Akkordeons:

Das Akkordeon wird mithilfe einer Kartenfunktion gerendert, die die Elemente durchläuft und den Körper basierend auf seiner Sichtbarkeit bedingt anzeigt state.

<code class="javascript">render() {
  return (
    <div>
      {accordions.map((accordion, index) => (
        <AccordionItem key={accordion.id} title={accordion.title} content={accordion.content} visible={accordion.visible} handleClick={() => handleClick(index)} />
      ))}
    </div>
  );
}</code>

jQuery integrieren

Obwohl wir das Akkordeon ohne jQuery implementiert haben, ist es bei Bedarf immer noch möglich, es einzubinden. Durch die Verwendung von npm können wir jQuery installieren und in unsere ReactJS-Komponente importieren.

<code class="javascript">import $ from 'jquery';
// ...

const Button = () => {
  $(document).ready(function(){
    // Use jQuery here
  });

  return (
    <button>...</button>
  );
};</code>

Zusammenfassend lässt sich sagen, dass es zwar möglich ist, die jQuery-Funktionalität mithilfe der Statusverwaltung und des Komponentenlebenszyklus von ReactJS zu replizieren, es kann jedoch Szenarien geben, in denen dies mehr ist Praktisch, um jQuery für bestimmte Aufgaben zu integrieren.

Das obige ist der detaillierte Inhalt vonWann und wie sollten Sie jQuery mit ReactJS verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!