React Antd & Mobx: 实现动态 Tab 水平菜单并关联侧边栏内容

本文将介绍如何使用 React、Antd 和 Mobx 构建一个动态的 Tab 水平菜单，同时实现与侧边栏内容的关联。通过 Mobx Store 管理菜单数据和选中状态，并使用 Antd 的 Menu 组件渲染菜单，最终实现 Tab 点击切换和侧边栏内容联动效果。

1. 创建 Mobx Store

首先，需要创建一个 Mobx Store 来管理菜单数据和选中的 Tab。

import { observable, action } from 'mobx';

class MenuStore {
  @observable tabs = []; // 存储 Tab 数据
  @observable activeKey = ''; // 当前选中的 Tab

  @action addTab = (tab) => {
    if (this.tabs.findIndex(t => t.key === tab.key) === -1) {
      this.tabs.push(tab);
    }
    this.activeKey = tab.key;
  }

  @action removeTab = (key) => {
    const index = this.tabs.findIndex(tab => tab.key === key);
    if (index !== -1) {
      this.tabs.splice(index, 1);
    }
    // 如果当前关闭的是选中的 Tab，则切换到上一个 Tab
    if (this.activeKey === key && this.tabs.length > 0) {
      this.activeKey = this.tabs[this.tabs.length - 1].key;
    } else {
      this.activeKey = '';
    }
  }
}

const store = new MenuStore();
export default store;

2. 构建水平菜单组件

在菜单组件中使用 Antd 的 Menu 组件来展示菜单，并使用 Mobx 的 observer 高阶组件将菜单组件包裹起来。

import React from 'react';
import { Menu } from 'antd';
import { observer } from 'mobx-react';
import store from './store';

const HorizontalMenu = observer(() => {
  const handleTabClick = (tab) => {
    store.addTab(tab);
  };

  const handleTabClose = (tab) => {
    store.removeTab(tab.key);
  };

  return (
    <Menu mode='horizontal' selectedKeys={[store.activeKey]}>
      {store.tabs.map(tab => (
        <Menu.Item key={tab.key} onClick={() => handleTabClick(tab)}>
          {tab.title}
          <CloseOutlined onClick={(e) => { e.stopPropagation(); handleTabClose(tab); }} />
        </Menu.Item>
      ))}
    </Menu>
  );
});

export default HorizontalMenu;

3. 构建侧边栏组件

在侧边栏组件中，可以使用 Antd 的 Menu 组件来展示侧边栏，并通过 Mobx Store 中的数据来控制选中状态。

import React from 'react';
import { Menu } from 'antd';
import { observer } from 'mobx-react';
import store from './store';

const SidebarMenu = observer(() => {
  return (
    <Menu mode='inline' selectedKeys={[store.activeKey]}>
      {store.tabs.map(tab => (
        <Menu.Item key={tab.key}>
          {tab.title}
        </Menu.Item>
      ))}
    </Menu>
  );
});

export default SidebarMenu;

4. 在页面中使用组件

最后，在页面中使用 HorizontalMenu 和 SidebarMenu 组件，即可实现动态 Tab 水平菜单和关联的侧边栏。

import React from 'react';
import HorizontalMenu from './HorizontalMenu';
import SidebarMenu from './SidebarMenu';

const App = () => {
  return (
    <div>
      <HorizontalMenu />
      <SidebarMenu />
    </div>
  );
};

export default App;

总结

通过以上步骤，我们就成功地使用 React、Antd 和 Mobx 构建了一个动态的 Tab 水平菜单，并实现了与侧边栏内容的关联。当你在水平菜单中点击一个 Tab 时，侧边栏中的菜单也会自动选中对应的项。同时关闭一个 Tab 时，如果该 Tab 是选中的 Tab，则会自动切换到上一个 Tab。