在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演示中提供的一种官方方式：https://github.com/marmelab/react-admin/blob/master/examples/demo/src/layout/Menu.js（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;