在 react-admin 中添加顶级菜单

Question

如何在标题和用户菜单之间的应用栏中设置顶级菜单？

我尝试了类似的方法，但它不起作用：

const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} ><MyTopMenu /></AppBar>

Answer 1

假设您想在 react-admin 中创建一个子菜单，您需要按照 material-ui 中的nested list 技术创建一个自定义子菜单组件。
您还需要按照 react-admin 的 documentation 中的说明创建和使用自定义菜单。

Answer 2

1. 官方提供的方式来自react-admin的demo：https://github.com/marmelab/react-admin/blob/master/examples/demo/src/layout/Menu.tsx(related answer)

2. 检查这个专门用于此目的的新插件：ra-tree-menu

Answer 3

由于kxo 上面提到的ra-tree-menu 包似乎运行不佳，我不得不为此开发一个新包，它可以解决用例并进一步提供更多的易用性和灵活性为了达到目的。

您可以查看：ra-treemenu。使用它的一个简单示例如下：

// In App.js
import * as React from 'react';
import { Admin, Resource, Layout } from 'react-admin';
/* Import TreeMenu from the package */
import TreeMenu from '@bb-tech/ra-treemenu';
 
const App = () => (
    <Admin layout={(props) => <Layout {...props} menu={TreeMenu} />} >
        {/* Dummy parent resource with isMenuParent options as true */}
        <Resource name="users" options={{ "label": "Users", "isMenuParent": true }} />
        {/* Children menu items under parent */}
        <Resource name="posts" options={{ "label": "Posts", "menuParent": "users" }} />
        <Resource name="comments" options={{ "label": "Comments", "menuParent": "users" }} />
        {/* Dummy parent resource with isMenuParent options as true */}
        <Resource name="groups" options={{ "label": "Groups", "isMenuParent": true }} />
        {/* Children menu items under parent */}
        <Resource name="members" options={{ "label": "Members", "menuParent": "groups" }} />
    </Admin>
);
 
export default App;