Wie kann ich jQuery in ReactJS integrieren, um ein Akkordeon zu erstellen, ohne die komponentenbasierte Architektur von React zu opfern?

Schnittstelle zwischen jQuery und ReactJS: Ein umfassender Leitfaden

Als ReactJS-Anfänger stehen Sie beim Übergang von der Vielseitigkeit von jQuery zum komponentenbasierten Ansatz von ReactJS möglicherweise vor Herausforderungen . Dieser Artikel führt Sie durch die Integration von jQuery in ReactJS, insbesondere im Zusammenhang mit der Erstellung eines Akkordeons.

Schritt 1: Das Akkordeon verstehen

In seiner HTML-Form Ein Akkordeon besteht aus mehreren Abschnitten, die jeweils eine Kopfzeile und einen zusammenklappbaren Körper enthalten. Mit jQuery können Sie diese Elemente mithilfe von Ereignis-Listenern dynamisch manipulieren.

Schritt 2: jQuery in ReactJS integrieren

Um jQuery in ReactJS zu integrieren, befolgen Sie diese Schritte:

1. Navigieren Sie über die Befehlszeile zu Ihrem Projektverzeichnis.

2. Installieren Sie jQuery mit npm mit dem Befehl:

   npm install jquery --save
   npm i --save-dev @types/jquery

3. JQuery importieren in die JSX-Datei, wo Sie sie verwenden müssen:

   import $ from 'jquery';

Schritt 3: Konvertieren von jQuery-Code in ReactJS

Um die jQuery zu konvertieren Code für das Akkordeon in ReactJS übertragen, können Sie die Statusverwaltung verwenden, um die Sichtbarkeit von Körperabschnitten zu verwalten. Hier ist ein Beispiel:

import React, { useState } from 'react';

const Accordion = () => {
  const [activeSection, setActiveSection] = useState(null);

  const handleHeadClick = (e) => {
    const section = e.target.parentElement;
    if (section === activeSection) {
      setActiveSection(null);
    } else {
      setActiveSection(section);
    }
  };

  return (
    <div className="accor">
      {sections.map((section) => (
        <div key={section.id} className="section">
          <div className="head" onClick={handleHeadClick}>{section.header}</div>
          <div className={`body ${activeSection === section ? '' : 'hide'}`}>{section.body}</div>
        </div>
      ))}
    </div>
  );
};

Fazit

Indem Sie diese Schritte befolgen, können Sie die Leistungsfähigkeit von jQuery in ReactJS nutzen und komplexe Benutzeroberflächen erstellen, ohne die Komponente zu beeinträchtigen. basierte Architektur von ReactJS.

Das obige ist der detaillierte Inhalt vonWie kann ich jQuery in ReactJS integrieren, um ein Akkordeon zu erstellen, ohne die komponentenbasierte Architektur von React zu opfern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!