React 16.x折腾记（三）：Mobx实现动态tab水平菜单关联侧边栏

2023-10-26 07:30:48

前言

随着前端技术的发展，React 16.x已经成为众多开发者构建前端应用的首选框架。Mobx作为一个状态管理库，也受到广泛的欢迎。在本文中，我们将结合Mobx，实现一个比较靠谱的动态tab水平菜单，同时关联侧边栏。

正文

1. 项目准备

在开始之前，我们需要创建一个React项目。可以使用以下命令：

npx create-react-app react-tab-menu

然后，进入项目目录，安装Mobx：

npm install mobx

2. 构建Mobx Store

接下来，我们需要创建一个Mobx Store来管理tab和侧边栏的状态。在src目录下创建一个store.js文件，并输入以下代码：

import { observable, action } from "mobx";

class Store {
  @observable tabs = [];
  @observable selectedTab = null;
  @observable sidebarOpen = false;

  @action addTab(tab) {
    this.tabs.push(tab);
  }

  @action selectTab(tab) {
    this.selectedTab = tab;
  }

  @action toggleSidebar() {
    this.sidebarOpen = !this.sidebarOpen;
  }
}

export default new Store();

3. 构建Tab组件

接下来，我们需要创建一个Tab组件。在src目录下创建一个Tab.js文件，并输入以下代码：

import React, { useContext } from "react";
import { StoreContext } from "./store";

const Tab = ({ tab }) => {
  const store = useContext(StoreContext);

  const handleClick = () => {
    store.selectTab(tab);
  };

  return (
    <li className="tab-item" onClick={handleClick}>
      {tab.title}
    </li>
  );
};

export default Tab;

4. 构建TabMenu组件

接下来，我们需要创建一个TabMenu组件。在src目录下创建一个TabMenu.js文件，并输入以下代码：

import React, { useContext } from "react";
import { StoreContext } from "./store";
import Tab from "./Tab";

const TabMenu = () => {
  const store = useContext(StoreContext);

  return (
    <ul className="tab-menu">
      {store.tabs.map((tab) => (
        <Tab key={tab.id} tab={tab} />
      ))}
    </ul>
  );
};

export default TabMenu;

5. 构建Sidebar组件

接下来，我们需要创建一个Sidebar组件。在src目录下创建一个Sidebar.js文件，并输入以下代码：

import React, { useContext } from "react";
import { StoreContext } from "./store";

const Sidebar = () => {
  const store = useContext(StoreContext);

  return (
    <div className="sidebar">
      <ul>
        {store.tabs.map((tab) => (
          <li key={tab.id}>{tab.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Sidebar;

6. 构建App组件

最后，我们需要创建一个App组件。在src目录下创建一个App.js文件，并输入以下代码：

import React, { useState, useEffect } from "react";
import { StoreContext } from "./store";
import TabMenu from "./TabMenu";
import Sidebar from "./Sidebar";

const App = () => {
  const [store] = useState(new Store());

  useEffect(() => {
    store.addTab({ id: 1, title: "Tab 1" });
    store.addTab({ id: 2, title: "Tab 2" });
    store.addTab({ id: 3, title: "Tab 3" });
  }, []);

  return (
    <StoreContext.Provider value={store}>
      <div className="app">
        <TabMenu />
        <Sidebar />
      </div>
    </StoreContext.Provider>
  );
};

export default App;