如何在 React-Admin 应用程序中配置主侧边栏菜单答案

【问题标题】：How to configure the main sidebar menu in a React-Admin app如何在 React-Admin 应用程序中配置主侧边栏菜单
【发布时间】：2022-09-26 05:42:19
【问题描述】：

我的应用程序使用 React-Admin 版本 2.9，我正在尝试确定如何自定义应用程序的主侧边栏菜单。

当我将Resource 项目添加到应用程序的Admin 组件时，它们会出现在侧边栏中，但似乎是部分随机顺序。有些与我的管理组件中的顺序相同，而另一些则不是。有没有办法指定这些项目的顺序？

对我来说，如何指定哪些资源项甚至出现在主侧边栏菜单上也有点神秘。我最终发现，如果我给它们一个options.label 属性，资源只会出现在侧边栏上。这是指定资源应出现在侧边栏中的预期机制吗？还是有其他一些可能更直观的方法将资源标记为显示在侧边栏中的资源？ documentation 只是声明\"options.label 允许自定义菜单中给定资源的显示名称。\"

标签： reactjs react-admin

【解决方案1】：

如果您为资源提供list 组件，资源会出现在侧边栏中，例如

<Resource name="posts" list={PostList} />

有一个菜单项，但

<Resource name="posts"  />

才不是。这是因为没有什么可以导致的。

菜单中的顺序是<Admin> 组件中子项的顺序。如果不是你的情况，可能是因为你有动态资源（即你在第一次渲染后添加了一些资源）。在这种情况下，您应该手动构建一个菜单，如文档中所述：

// in src/MyMenu.js
import React from 'react';
import { connect } from 'react-redux';
import { MenuItemLink, getResources, Responsive } from 'react-admin';
import { withRouter } from 'react-router-dom';

const MyMenu = ({ resources, onMenuClick, logout }) => (
    <div>
        {resources.map(resource => (
            <MenuItemLink
                key={resource.name}
                to={`/${resource.name}`}
                primaryText={resource.options && resource.options.label || resource.name}
                leftIcon={createElement(resource.icon)}
                onClick={onMenuClick}
            />
        ))}
        <MenuItemLink to="/custom-route" primaryText="Miscellaneous" onClick={onMenuClick} />
        <Responsive
            small={logout}
            medium={null} // Pass null to render nothing on larger devices
        />
    </div>
);

const mapStateToProps = state => ({
    resources: getResources(state),
});

export default withRouter(connect(mapStateToProps)(MyMenu));

注意：react-admin 2.9 已经 3 年没有维护了，我强烈建议你升级到版本 4。

【讨论】：