如何用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清除
>和

的內容。

<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>

>

5. App.css手風式組件結構：index.css

在>中，創建component：>

1. 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>

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

> ...

> install

：

import

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

<code class="language-javascript">import React, { useRef, useState } from 'react';
import { RiArrowDropDownLine } from 'react-icons/ri';</code>

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

中）：（提供的CSS廣泛；請考慮將其分解為較小，更易於管理的樣式表）。

<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>

>

4. 實現MAIMAccordion.css組件：App.css

<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>

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

>

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