如何在 ReactJS 中建立手風琴？

---

手風琴是一種UI元素，允許使用者展開和壓縮內容部分。在ReactJS中建立手風琴是為您的Web應用程式新增互動性的絕佳方法，使訪問者更容易瀏覽和查詢所需資訊。

本文將引導您完成在ReactJS中建立手風琴的步驟，並提供示例程式碼幫助您入門。

步驟 1：設定 React 專案

首先，您必須設定一個React專案。如果您還沒有專案，可以使用 `create-react-app` 命令建立一個新專案。

npx create-react-app my-app
cd my-app
npm start

這將在 "my-app" 目錄中建立一個新專案，並啟動一個開發伺服器，以便您線上預覽更改。

步驟 2：建立手風琴元件

設定基本的React專案後，我們可以為我們的手風琴建立一個新元件。在專案的 src 目錄中，建立一個名為 Accordion.js 的新檔案。

Accordion.js

import React, { useState } from 'react';
function Accordion({ items }) {
   const [activeIndex, setActiveIndex] = useState(-1);
   const handleClick = (index) => {
      setActiveIndex(index === activeIndex ? -1 : index);
   };
   return (
      <div>
         {items.map((item, index) => (
            <div key={item.title}>
               <button onClick={() =>handleClick(index)}>{item.title}</button>
               {index === activeIndex && <p>{item.content}</p>}
            </div>
         ))}
      </div>
   );
}
export default Accordion;

此程式碼從 react 包中匯入 React 和 useState 鉤子。

useState 鉤子允許我們向元件新增狀態，在本例中為 activeIndex。當點選按鈕時，我們使用 setActiveIndex 函式來更改狀態並使用新的 activeIndex 重新渲染元件。我們將初始狀態設定為 -1。

此外，我們透過使用 map 方法迭代 items 引數來渲染手風琴專案。

步驟 3：將手風琴新增到 App

現在我們有了手風琴元件，我們需要將其新增到我們的應用程式中。為此，我們將把Accordion元件匯入App.js檔案，並將其新增到JSX中。

App.js

import React from 'react';
import Accordion from './Accordion';
const items = [
   {
      title: "Section 1",
      content: "This is the content of section 1"
   },
   {
      title: "Section 2",
      content: "This is the content of section 2"
   },
   {
      title: "Section 3",
      content: "This is the content of section 3"
   }
]
function App() {
   return (
      <div>
         <Accordion items={items} />
      </div>
   );
}
export default App;

步驟 4：設定手風琴樣式

最後，我們可以為手風琴設定樣式，使其看起來更美觀。這可以透過將 CSS 檔案匯入我們的 Accordion.js 程式碼並將其插入其中來實現。

import './Accordion.css';

Accordion.css

/* Accordion.css */
button {
   padding: 8px 20px;
   background-color: #4CAF50;
   color: white;
   border: none;
   cursor: pointer;
   margin-right: 10px;
}
p {
   font-size: 20px;
   margin-top: 20px;
}

這將為我們的手風琴提供一些基本的樣式，例如按鈕的手風琴背景的綠色背景顏色和白色的文字，以及游標更改以指示按鈕可以被點選。為了使按鈕更具動態性，您還可以新增懸停、活動和關注狀態。

/* Accordion.css */
button:hover {
   background-color: #3e8e41;
}
button:active {
   transform: scale(0.95);
}
button:focus {
   outline: none;
}

透過選擇“全部關閉”按鈕，使用者可以關閉手風琴的每個元素，從而使其具有更動態的功能。此外，您還可以新增一個功能，允許使用者透過單擊“全部開啟”按鈕來訪問所有手風琴專案。

為了允許使用者關閉和開啟所有手風琴專案，在這個程式碼中添加了兩個新的按鈕，“全部關閉”和“全部開啟”，以及兩個新的事件處理程式，“handleClose All”和“handleOpen All”。

步驟 5：使手風琴響應式

使用 CSS 媒體查詢，我們可以根據螢幕大小以不同的方式設定元件的樣式，以使手風琴具有響應性。例如，當螢幕寬度小於 500 畫素時，我們可以更改手風琴內容的字型大小。

/* Accordion.css */
@media screen and (max-width: 500px) {
   p {
      font-size: 16px;
   }
}

我們還可以使用 flexbox 使元件在小螢幕上佔據其容器的全部寬度。

/* App.css */
.accordion-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

按照這些說明操作後，您的 ReactJS 應用程式應該有一個響應式且功能齊全的手風琴。可以進一步擴充套件和修改此手風琴以滿足您的應用程式的特定需求。但請記住，在使用 ReactJS 建立手風琴時，還有許多其他方法可以實現相同的結果。

為了確保即使在頁面重新整理後活動的手風琴專案仍然可見，您還可以考慮將其儲存在本地儲存中。為了使手風琴更美觀，您還可以新增在開啟和關閉時為手風琴元素設定動畫的功能。

輸出

結論

使用提供的示例程式碼，您應該能夠建立一個基本的手風琴，稍後可以對其進行增強以滿足您的應用程式的特定需求。請記住，使用 ReactJS 建立手風琴並實現相同結果的方法有很多。透過遵循這篇博文中提供的說明，您可以建立一個手風琴，這對於組織和顯示您 ReactJS 應用程式中的材料非常有用。