ReactJS尝鲜：实现tab页切换和菜单栏切换和手风琴切换效果，进度条效果

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样式完成页面的交互设计。