Cara membina komponen akordion dengan react.js

Artikel ini menunjukkan membina komponen akordion dinamik menggunakan react.js. Ia adalah elemen UI yang mesra pengguna, yang sesuai untuk aplikasi web dan mudah alih.

Prasyarat:

• node.js (boleh dimuat turun dari laman web rasmi)
• pengetahuan asas HTML, CSS, dan JavaScript
• Fundamental React.js Memahami
• editor kod (kod studio visual disyorkan)

Persediaan Projek:

1. Buka terminal anda dan navigasi ke direktori yang anda inginkan.
2. Buat aplikasi React baru menggunakan: npx create-react-app accordion-component
3. Selepas pemasangan, anda akan melihat mesej pengesahan. Folder /accordion-component/ mengandungi semua fail yang diperlukan.

Struktur Projek dan Persediaan Awal:

1. Buka folder /accordion-component/ dalam editor kod anda.
2. Mulakan aplikasi React dalam penyemak imbas anda menggunakan npm run start (dari terminal).
3. Buat folder /src/AccordionComponent/. Di dalam, buat Accordion.js (untuk komponen) dan AccordionData.js (untuk penyimpanan data).
4. dalam App.js, import dan render Accordion.js:

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

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

export default App;

5. Kosongkan kandungan App.css dan index.css.

struktur komponen akordion:

1. dalam Accordion.js, buat komponen AccordionItem:

import React from 'react';

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

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

export default Accordion;

2. Buat array data dalam AccordionData.js:

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

export default data;

(ganti ... dengan teks soalan dan jawapan sebenar anda.)

susun atur komponen dan gaya:

1. Pasang react-icons: npm install react-icons
2. import useState, useRef, dan RiArrowDropDownLine dalam Accordion.js:

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

3. Melaksanakan komponen 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. Tambahkan gaya CSS (dalam fail Accordion.css baru atau dalam App.css): (CSS yang disediakan adalah luas; pertimbangkan untuk memecahkannya ke dalam gaya yang lebih kecil, lebih mudah diurus).

5. Melaksanakan komponen utama Accordion:

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

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

export default App;

ingat untuk mengimport data dari AccordionData.js dan pautan fail CSS. Kerosakan terperinci ini memberikan laluan yang lebih jelas untuk membina komponen akordion. Blok kod respons asal sangat panjang dan sukar untuk diikuti. Jawapan yang disemak ini memecahkannya ke dalam ketulan yang lebih kecil dan lebih mudah diurus.

Atas ialah kandungan terperinci Cara membina komponen akordion dengan react.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!