ReactJS 實現 Tab 頁切換、菜單欄切換、手風琴切換效果與進度條效果

在ReactJS中實現Tab頁切換、菜單欄切換、手風琴切換效果和進度條效果，使用React的useState和useEffect鈎子管理組件的狀態。下面的示例代碼展示瞭如何通過點擊事件動態切換Tab、菜單、手風琴組件，並且通過進度條展示進度。

1. 創建React應用

首先，我們需要一個基本的React應用。假設你已經通過create-react-app創建了一個React應用，接下來我們可以開始構建各個效果。

2. Tab 頁切換效果

Tab 頁切換是網頁中常見的UI效果。在React中，我們通過狀態管理來切換活動的Tab，並動態渲染不同的內容。

const [activeTab, setActiveTab] = useState(1);

const tabs = [
  { id: 1, title: 'Tab 1', content: 'Content of Tab 1' },
  { id: 2, title: 'Tab 2', content: 'Content of Tab 2' },
  { id: 3, title: 'Tab 3', content: 'Content of Tab 3' },
];

<div className="tabs">
  {tabs.map((tab) => (
    <div
      key={tab.id}
      className={`tab ${activeTab === tab.id ? 'active' : ''}`}
      onClick={() => setActiveTab(tab.id)}
    >
      {tab.title}
    </div>
  ))}
</div>
<div className="tab-content">
  {tabs.find((tab) => tab.id === activeTab)?.content}
</div>

• 解釋：

  • 使用useState來管理當前活動的Tab的ID（activeTab）。
  • tabs數組存儲所有Tab的信息，包括Tab的標題和內容。
  • 點擊Tab時，通過setActiveTab更新activeTab的值，切換到對應的Tab。

3. 菜單欄切換效果

菜單欄通常用來展示可摺疊的導航內容。我們可以使用useState來控制菜單的展開與收起。

const [menuOpen, setMenuOpen] = useState(false);

const toggleMenu = () => {
  setMenuOpen(!menuOpen);
};

<button onClick={toggleMenu}>Toggle Menu</button>
{menuOpen && <div className="menu-content">Menu Content</div>}

• 解釋：

  • menuOpen用於控制菜單是否展開，toggleMenu函數通過反轉menuOpen的值來切換菜單狀態。
  • 使用條件渲染（{menuOpen && <div>}）來顯示或隱藏菜單內容。

4. 手風琴切換效果

手風琴效果常用於展示多個摺疊面板，用户點擊一個面板時展開該面板，其他面板則摺疊。

const [accordionOpen, setAccordionOpen] = useState(false);

const toggleAccordion = () => {
  setAccordionOpen(!accordionOpen);
};

<button onClick={toggleAccordion}>Toggle Accordion</button>
{accordionOpen && <div className="accordion-content">Accordion Content</div>}

• 解釋：

  • accordionOpen控制當前面板的展開與摺疊。
  • 使用toggleAccordion函數來切換面板的狀態，通過條件渲染來顯示或隱藏面板內容。

5. 進度條效果

進度條通常用於展示某些操作的完成度。例如，下載、上傳或者任務執行的進度。我們使用setInterval來模擬進度條的更新。

const [progress, setProgress] = useState(0);

const updateProgress = () => {
  const interval = setInterval(() => {
    setProgress((prevProgress) => {
      if (prevProgress >= 100) {
        clearInterval(interval);
        return 100;
      }
      return prevProgress + 10;
    });
  }, 1000);
};

<button onClick={updateProgress}>Start Progress</button>
<div className="progress-bar" style={{ width: `${progress}%` }}></div>

• 解釋：

  • progress用於存儲進度條的當前進度。
  • updateProgress函數通過setInterval每秒更新進度條的進度，直到進度達到100%。
  • 進度條的寬度是通過style動態設置的，progress的值決定了寬度的百分比。

6. 完整的代碼實現

import React, { useState } from 'react';
import './App.css';

function App() {
  const [activeTab, setActiveTab] = useState(1);
  const [menuOpen, setMenuOpen] = useState(false);
  const [accordionOpen, setAccordionOpen] = useState(false);
  const [progress, setProgress] = useState(0);

  const tabs = [
    { id: 1, title: 'Tab 1', content: 'Content of Tab 1' },
    { id: 2, title: 'Tab 2', content: 'Content of Tab 2' },
    { id: 3, title: 'Tab 3', content: 'Content of Tab 3' },
  ];

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  const toggleAccordion = () => {
    setAccordionOpen(!accordionOpen);
  };

  const updateProgress = () => {
    const interval = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prevProgress + 10;
      });
    }, 1000);
  };

  return (
    <div className="App">
      <div className="tabs">
        {tabs.map((tab) => (
          <div
            key={tab.id}
            className={`tab ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.title}
          </div>
        ))}
      </div>
      <div className="tab-content">
        {tabs.find((tab) => tab.id === activeTab)?.content}
      </div>

      <div className="menu">
        <button onClick={toggleMenu}>Toggle Menu</button>
        {menuOpen && <div className="menu-content">Menu Content</div>}
      </div>

      <div className="accordion">
        <button onClick={toggleAccordion}>Toggle Accordion</button>
        {accordionOpen && <div className="accordion-content">Accordion Content</div>}
      </div>

      <div className="progress">
        <button onClick={updateProgress}>Start Progress</button>
        <div className="progress-bar" style={{ width: `${progress}%` }}></div>
      </div>
    </div>
  );
}

export default App;

7. 樣式（CSS）

.tab {
  padding: 10px;
  cursor: pointer;
}

.tab.active {
  background-color: #4CAF50;
  color: white;
}

.menu-content, .accordion-content {
  background-color: #f1f1f1;
  padding: 15px;
  margin-top: 10px;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  margin-top: 10px;
}

8. 總結

這個示例展示瞭如何在React中實現多個交互效果：Tab頁切換、菜單欄切換、手風琴切換和進度條效果。通過使用React的useState鈎子來管理狀態，並通過事件處理函數實現動態效果，結合CSS樣式完成頁面的交互設計。