Maison >interface Web >js tutoriel >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:
Configuration du projet:
npx create-react-app accordion-component
/accordion-component/
Structure du projet et configuration initiale:
/accordion-component/
npm run start
/src/AccordionComponent/
(pour le composant) et Accordion.js
(pour le stockage de données). AccordionData.js
App.js
: 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>
App.css
. index.css
Structure des composants de l'accordéon:
Accordion.js
: AccordionItem
<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>
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>(Remplacer
par votre texte de question et de réponse réel.) ...
Disposition et style des composants:
react-icons
npm install react-icons
useState
et useRef
dans RiArrowDropDownLine
: Accordion.js
<code class="language-javascript">import React, { useRef, useState } from 'react'; import { RiArrowDropDownLine } from 'react-icons/ri';</code>
AccordionItem
<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>
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
: 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>
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!