如何用React.js構建手風琴組件

>本文展示了使用React.js構建動態手風琴組件。 這是一個用戶友好的，節省空間的UI元素，非常適合Web和移動應用程序。

>

>先決條件：

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

項目設置：

打開您的終端並導航到所需的目錄。
創建一個新的React應用程序：
2. npx create-react-app accordion-component>
安裝後，您會看到一條確認消息。
3. 文件夾包含所有必要的文件。 /accordion-component/>

項目結構和初始設置：>

>打開代碼編輯器中的文件夾。
1. /accordion-component/>使用
（來自終端）在瀏覽器中啟動React應用程序。 。
2. 創建一個npm run start文件夾。在內部，創建
（對於組件）和（用於數據存儲）。
3. 在/src/AccordionComponent/>中，導入和渲染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手風式組件結構：index.css

在>中，創建component：>

1. Accordion.js在AccordionItem中創建數據陣列：

import React from 'react';

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

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

export default Accordion;

（用您的實際問題和回答文本替換
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;

> ...

> install

：

import

，
1. 和react-iconsinnpm install react-icons：
>
2. useState useRef RiArrowDropDownLine實現Accordion.js組件：

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

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

中）：（提供的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. 實現MAIMAccordion.css組件：App.css

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

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

export default App;

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

>

以上是如何用React.js構建手風琴組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！