>本文展示了使用React.js構(gòu)建動(dòng)態(tài)手風(fēng)琴組件。 這是一個(gè)用戶友好的，節(jié)省空間的UI元素，非常適合Web和移動(dòng)應(yīng)用程序。

>先決條件：

• > node.js（可從官方網(wǎng)站下載）
• 基本HTML，CSS和JavaScript知識(shí)
• >基本反應(yīng)
>代碼編輯器（推薦的Visual Studio代碼）

項(xiàng)目設(shè)置：

打開您的終端並導(dǎo)航到所需的目錄。
創(chuàng)建一個(gè)新的React應(yīng)用程序：
2. npx create-react-app accordion-component>
安裝後，您會(huì)看到一條確認(rèn)消息。
3. 文件夾包含所有必要的文件。 /accordion-component/>

項(xiàng)目結(jié)構(gòu)和初始設(shè)置：>

>打開代碼編輯器中的文件夾。
1. /accordion-component/>使用
（來(lái)自終端）在瀏覽器中啟動(dòng)React應(yīng)用程序。 。
2. 創(chuàng)建一個(gè)npm run start文件夾。在內(nèi)部，創(chuàng)建
（對(duì)於組件）和（用於數(shù)據(jù)存儲(chǔ)）。
3. 在/src/AccordionComponent/>中，導(dǎo)入和渲染Accordion.js：AccordionData.js>
4. App.js Accordion.js清除
>和

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

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

export default App;

5. App.css手風(fēng)式組件結(jié)構(gòu)：index.css

在>中，創(chuàng)建component：>

1. Accordion.js在AccordionItem中創(chuàng)建數(shù)據(jù)陣列：

import React from 'react';

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

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

export default Accordion;

（用您的實(shí)際問(wèn)題和回答文本替換
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;

> ...

：

，
1. 和react-iconsinnpm install react-icons：
>
2. useState useRef RiArrowDropDownLine實(shí)現(xiàn)Accordion.js組件：

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

3. AccordionItem添加CSS樣式（在新的
中或

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. 實(shí)現(xiàn)MAIMAccordion.css組件：App.css

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

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

export default App;

記住要從data導(dǎo)入AccordionData.js並鏈接CSS文件。 這種詳細(xì)的細(xì)分為構(gòu)建手風(fēng)琴組件提供了更清晰的途徑。 原始響應(yīng)的代碼塊非常長(zhǎng)，很難遵循。 此修訂的答案將其分解為較小，更易於管理的塊。

以上是如何用React.js構(gòu)建手風(fēng)琴組件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！