Comment construire un composant accordéon avec react.js

Cet article montre la construction d'un composant d'accordéon dynamique à l'aide de react.js. Il s'agit d'un élément d'interface utilisateur convivial et économique idéal pour les applications Web et mobiles.

Prérequis:

• node.js (téléchargeable sur le site officiel)
• Connaissances de base HTML, CSS et JavaScript
• REATTAMENTS FONDAMENTAL.
un éditeur de code (Code Visual Studio recommandé)

Configuration du projet:

Ouvrez votre terminal et accédez au répertoire souhaité.
Créez une nouvelle application React en utilisant:
2. npx create-react-app accordion-component
Après l'installation, vous verrez un message de confirmation. Le dossier
3. contient tous les fichiers nécessaires. /accordion-component/

Structure du projet et configuration initiale:

Ouvrez le dossier
1. dans votre éditeur de code. /accordion-component/
Démarrez l'application React dans votre navigateur en utilisant
2. (à partir du terminal). npm run start
Créer un dossier
3. . À l'intérieur, créez /src/AccordionComponent/ (pour le composant) et Accordion.js (pour le stockage de données). AccordionData.js
dans
4. , Importer et rendre App.js: Accordion.js

import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div className="App">
      <Accordion />
    </div>
  );
}

export default App;

Effacer le contenu de
5. et App.css. index.css

Structure des composants de l'accordéon:

dans
1. , créez le composant Accordion.js: AccordionItem

import React from 'react';

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

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

export default Accordion;

Créez le tableau de données dans
2. : AccordionData.js

const data = [
  { question: 'What are accordion components?', answer: '...' },
  { question: 'What are they used for?', answer: '...' },
  // ... more questions and answers
];

export default data;

(Remplacer

par votre texte de question et de réponse réel.) ...

Disposition et style des composants:

installer
1. : react-icons npm install react-icons
import
2. , useState et useRef dans RiArrowDropDownLine: Accordion.js

import React, { useRef, useState } from 'react';
import { RiArrowDropDownLine } from 'react-icons/ri';

Implémentez le composant
3. : AccordionItem

const AccordionItem = ({ question, answer, isOpen, onClick }) => {
  const contentHeight = useRef();
  return (
    <div className="wrapper">
      <div className={`question-container ${isOpen ? 'active' : ''}`} onClick={onClick}>
        <p className="question-content">{question}</p>
        <RiArrowDropDownLine className={`arrow ${isOpen ? 'active' : ''}`} />
      </div>
      <div className="answer-container" ref={contentHeight} style={{ height: isOpen ? contentHeight.current.scrollHeight : "0px" }}>
        <p className="answer-content">{answer}</p>
      </div>
    </div>
  );
};

4. Ajouter un style CSS (dans un nouveau fichier

   ou à l'intérieur Accordion.css): (le CSS fourni est vaste; envisagez de le diviser en feuilles de style plus petites et plus gérables). App.css

5. Implémentez le composant principal

   : Accordion

import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div className="App">
      <Accordion />
    </div>
  );
}

export default App;

N'oubliez pas d'importer data depuis AccordionData.js et de lier le fichier CSS. Cette ventilation détaillée fournit un chemin plus clair pour construire la composante de l'accordéon. Les blocs de code de la réponse d'origine étaient très longs et difficiles à suivre. Cette réponse révisée le divise en morceaux plus petits et plus gérables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!