[英]How to configure the main sidebar menu in a React-Admin app
My app uses React-Admin version 2.9 and I'm trying to determine how to customize the app's main sidebar menu.我的应用程序使用 React-Admin 2.9版,我正在尝试确定如何自定义应用程序的主侧边栏菜单。
When I add Resource items to the app's Admin component, they appear in the sidebar, but in a seemingly partially random order.当我将Resource项添加到应用程序的Admin组件时,它们会出现在侧边栏中,但看起来部分是随机的。 Some are in the same order as they are in my Admin component, others are not.
有些与我的管理组件中的顺序相同,有些则不是。 Is there some way to specify the ordering of these items?
有没有办法指定这些项目的顺序?
It's also a bit mysterious to me how to specify which Resource items even appear on that main sidebar menu.对我来说,如何指定哪些资源项甚至出现在主侧边栏菜单上也有点神秘。 I eventually figured out that resources only appear on the sidebar if I give them an
options.label
attribute.我最终发现,如果我给它们一个
options.label
属性,资源只会出现在侧边栏上。 Is that the intended mechanism for specifying that a Resource should appear in the sidebar?这是指定资源应出现在侧边栏中的预期机制吗? Or is there some other, perhaps more intuitive, way to mark a Resource as one to appear in the sidebar?
还是有其他一些可能更直观的方法将资源标记为显示在侧边栏中的资源? The documentation simply states " options.label allows to customize the display name of a given resource in the menu. "
文档只是说明“ options.label 允许自定义菜单中给定资源的显示名称。 ”
Resources appear in the sidebar if you provide them a list
component, eg如果您为资源提供
list
组件,资源会出现在侧边栏中,例如
<Resource name="posts" list={PostList} />
Has a menu entry, but有一个菜单项,但
<Resource name="posts" />
does not.才不是。 This is because there would be nothing to lead to.
这是因为没有什么可以导致的。
The order in the menu is the order of the children in the <Admin>
component.菜单中的顺序是
<Admin>
组件中子项的顺序。 If it is not in your case, it may be because you have dynamic resources (ie you add some Resources after the first render).如果不是你的情况,可能是因为你有动态资源(即你在第一次渲染后添加了一些资源)。 In that case, you should build a Menu by hand, as explained in the documentation:
在这种情况下,您应该手动构建一个菜单,如文档中所述:
// 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));
More details at https://marmelab.com/react-admin/doc/2.9/Theming.html#using-a-custom-menu更多详细信息请参见 https://marmelab.com/react-admin/doc/2.9/Theming.html#using-a-custom-menu
Note: react-admin 2.9 is not maintained since 3 years, I strongly advise you to upgrade to version 4.注意:react-admin 2.9 已经 3 年没有维护了,我强烈建议你升级到版本 4。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.