Context + useEffect 让你的 Tab 功能一劳永逸

2024-02-12 21:53:13

在管理后台设计中，Tab 功能扮演着至关重要的角色。它允许用户在不同的页面或内容区域之间切换，而无需重新加载整个页面。使用 Context 和 useEffect 来实现 Tab 功能是一种非常有效且完备的解决方案。

首先，你需要创建一个 Context 对象来存储 Tab 的状态。这个 Context 对象包含了当前选中的 Tab 项以及所有 Tab 项的列表。

import React, { createContext, useState, useEffect } from "react";

const TabContext = createContext();

const TabProvider = ({ children }) => {
  const [selectedTab, setSelectedTab] = useState(0);
  const [tabs, setTabs] = useState([]);

  useEffect(() => {
    const newTabs = [];
    for (let i = 0; i < 5; i++) {
      newTabs.push({
        id: i,
        title: `Tab ${i}`,
        content: `Content for Tab ${i}`
      });
    }
    setTabs(newTabs);
  }, []);

  return (
    <TabContext.Provider value={{ selectedTab, setSelectedTab, tabs }}>
      {children}
    </TabContext.Provider>
  );
};

export { TabContext, TabProvider };

接下来，你需要使用 useEffect 钩子来监听当前选中的 Tab 项的变化。当选中的 Tab 项发生变化时，你需要更新 Tab 的状态。

import React, { useContext } from "react";

const TabContent = () => {
  const { selectedTab, tabs } = useContext(TabContext);

  return (
    <div>
      {tabs[selectedTab].content}
    </div>
  );
};

export default TabContent;

最后，你需要在你的组件中使用 TabContext 来访问 Tab 的状态。你可以在组件的 render 方法中使用 TabContent 组件来显示当前选中的 Tab 项的内容。

import React, { useContext } from "react";

const TabBar = () => {
  const { selectedTab, setSelectedTab, tabs } = useContext(TabContext);

  return (
    <div>
      {tabs.map((tab, index) => (
        <button key={index} onClick={() => setSelectedTab(index)}>
          {tab.title}
        </button>
      ))}
    </div>
  );
};

export default TabBar;