So bauen Sie eine Akkordeonkomponente mit React.js auf

Dieser Artikel zeigt, dass eine dynamische Akkordeonkomponente mit React.js erstellt wird. Es ist ein benutzerfreundliches, platzsparendes UI-Element ideal für Web- und Mobile-Apps.

Voraussetzungen:

• node.js (herunterladbar auf der offiziellen Website)
• grundlegende HTML-, CSS- und JavaScript -Wissen
• grundlegendes React.js Verständnis
• Ein Code -Editor (Visual Studio Code empfohlen)

Projekt -Setup:

1. Öffnen Sie Ihr Terminal und navigieren Sie zu Ihrem gewünschten Verzeichnis.
2. Erstellen Sie eine neue React -App mit: npx create-react-app accordion-component
3. Nach der Installation sehen Sie eine Bestätigungsnachricht. Der Ordner /accordion-component/ enthält alle erforderlichen Dateien.

Projektstruktur und anfängliches Setup:

1. Öffnen Sie den Ordner /accordion-component/ in Ihrem Code -Editor.
2. Starten Sie die React -App in Ihrem Browser mit npm run start (vom Anschluss).
3. Erstellen Sie einen /src/AccordionComponent/ Ordner. Erstellen Sie Accordion.js (für die Komponente) und AccordionData.js (für die Datenspeicherung).
.
4. In App.js importieren und rendern Accordion.js:

<code class="language-javascript">import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div classname="App">
      <accordion></accordion>
    </div>
  );
}

export default App;</code>

5. Löschen Sie den Inhalt von App.css und index.css.

Akkordeonkomponentenstruktur:

1. in Accordion.js erstellen Sie die AccordionItem -Komponente:

<code class="language-javascript">import React from 'react';

const AccordionItem = () => {
  return (<h1>Accordion</h1>);
};

const Accordion = () => {
  return (
    <div>
      <accordionitem></accordionitem>
    </div>
  );
};

export default Accordion;</code>

2. Erstellen Sie das Datenarray in AccordionData.js:

<code class="language-javascript">const data = [
  { question: 'What are accordion components?', answer: '...' },
  { question: 'What are they used for?', answer: '...' },
  // ... more questions and answers
];

export default data;</code>

(Ersetzen Sie ... durch Ihren tatsächlichen Frage und beantworten Sie Text.)

Komponentenlayout und Styling:

1. installieren react-icons: npm install react-icons
2. import useState, useRef und RiArrowDropDownLine in Accordion.js:

<code class="language-javascript">import React, { useRef, useState } from 'react';
import { RiArrowDropDownLine } from 'react-icons/ri';</code>

3. implementieren Sie die AccordionItem -Komponente:

<code class="language-javascript">const AccordionItem = ({ question, answer, isOpen, onClick }) => {
  const contentHeight = useRef();
  return (
    <div classname="wrapper">
      <div classname="{`question-container" : onclick="{onClick}">
        <p classname="question-content">{question}</p>
        <riarrowdropdownline classname="{`arrow" :></riarrowdropdownline>
      </div>
      <div classname="answer-container" ref="{contentHeight}" style="{{" height: isopen contentheight.current.scrollheight :>
        <p classname="answer-content">{answer}</p>
      </div>
    </div>
  );
};</code>

4. CSS -Styling hinzufügen (in einer neuen Accordion.css Datei oder innerhalb von App.css): (Das bereitgestellte CSS ist umfangreich; überlegen Sie es in kleinere, überschaubare Stylesheets).

5. implementieren Sie die Hauptkomponente: Accordion

<code class="language-javascript">import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div classname="App">
      <accordion></accordion>
    </div>
  );
}

export default App;</code>

Denken Sie daran, data aus AccordionData.js zu importieren und die CSS -Datei zu verknüpfen. Diese detaillierte Aufschlüsselung bietet einen klareren Weg zum Aufbau der Akkordeonkomponente. Die Codeblöcke der ursprünglichen Reaktion waren sehr lang und schwer zu befolgen. Diese überarbeitete Antwort unterteilt es in kleinere, überschaubarere Stücke.

Das obige ist der detaillierte Inhalt vonSo bauen Sie eine Akkordeonkomponente mit React.js auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!