揭秘 Ant Design Pro 中 MenuRender 巧控菜单显示隐藏的秘诀

2023-11-30 23:40:53

在 Ant Design Pro 的广阔世界里，灵活定制菜单是一项必备技能。而 MenuRender 正是解锁这一潜力的利器。本文将深入剖析 MenuRender 的奥秘，揭示如何通过它控制菜单的显示隐藏，让你在管理平台中随心所欲地打造个性化体验。

MenuRender 简介

MenuRender 是一个函数组件，它接收一个 menuConfig 参数，该参数是一个 menuItems 数组，用于定义菜单结构。通过实现 MenuRender，你可以完全控制菜单的呈现方式。

控制菜单显示隐藏

要使用 MenuRender 控制菜单的显示隐藏，需要通过 menuConfig 参数传递一个 render 函数。此函数接收 menuItem 和 index 参数，并返回一个 React 元素。如果你希望在某些条件下隐藏菜单项，你可以在 render 函数中根据需要返回 null。

例如，假设我们希望在登录后才显示菜单：

const renderMenuItem = (menuItem, index) => {
  const isLoggedIn = useUserStore().isLoggedIn;
  if (!isLoggedIn) {
    return null;
  }
  return (
    <Menu.Item key={index}>
      {menuItem.label}
    </Menu.Item>
  );
};

通过这种方式，我们可以在用户登录后才渲染菜单项。

深入子应用

对于基于 UMI、Qiankun 的微前端架构，MenuRender 也同样适用。在进入子应用后显示子应用菜单时，需要在子应用中通过 MenuRender 重新渲染菜单。

例如，在子应用的 App.tsx 文件中：

import { useModel } from 'umi';
import { MenuRender } from '@ant-design/pro-layout';

const App = () => {
  const userStore = useModel('user');
  return (
    <MenuRender
      menuConfig={userStore.menuConfig}
    />
  );
};