react-admin 创建一个可以从侧边菜单访问的自定义页面 [英] react-admin Create a custom page which can be accessed from menu sidebar
问题描述
我是 react-admin 的新手,如何创建可以从侧边菜单访问的自定义页面?我正在寻找类似于本教程:https://marmelab.com/blog/2019/03/07/react-admin-advanced-recipes-user-profile.html 但我需要能够从图标访问该个人资料页面在左侧菜单边栏中,就像其他资源一样.谢谢
你需要使用你的菜单组件:
从'react'导入React;import { Layout, MenuItemLink, Responsive } from 'react-admin';从 './MyAppbar' 导入 MyAppbar;从 '@material-ui/icons/Book' 导入 BookIcon;从 '@material-ui/icons/Settings' 导入 SettingsIcon;从@material-ui/icons/ChatBubble"导入 ChatBubbleIcon;从'@material-ui/icons/Label'导入LabelIcon;const 菜单项 = [{ name: 'posts', text: 'Posts', icon: <BookIcon/>},{ 名称:'评论',文本:'评论',图标:<ChatBubbleIcon/>},{ 名称:'标签',文本:'标签',图标:<LabelIcon/>},{ name: 'my-profile', text: 'My profile', icon: <SettingsIcon/>}];const MyMenu = ({ onMenuClick, logout }) =>(<div>{ menuItems.map(item => (<菜单项链接键={item.name}to={`/${item.name}`}primaryText={item.text}leftIcon={item.icon}onClick={onMenuClick}/>))}<响应式小={注销}中={空}/>
);const MyLayout = props =><Layout {...props} menu={MyMenu} appBar={MyAppbar}/>;导出默认的 MyLayout;
I'm new to react-admin, how can I create a custom page that can access from menu sidebar? What I'm looking for is similar to this tutorial: https://marmelab.com/blog/2019/03/07/react-admin-advanced-recipes-user-profile.html but I need to be able to access that Profile page from an icon in left menu sidebar just like other Resource. Thanks
You need to use your menu component:
import React from 'react';
import { Layout, MenuItemLink, Responsive } from 'react-admin';
import MyAppbar from './MyAppbar';
import BookIcon from '@material-ui/icons/Book';
import SettingsIcon from '@material-ui/icons/Settings';
import ChatBubbleIcon from '@material-ui/icons/ChatBubble';
import LabelIcon from '@material-ui/icons/Label';
const menuItems = [
{ name: 'posts', text: 'Posts', icon: <BookIcon /> },
{ name: 'comments', text: 'Comments', icon: <ChatBubbleIcon /> },
{ name: 'tags', text: 'Tags', icon: <LabelIcon /> },
{ name: 'my-profile', text: 'My profile', icon: <SettingsIcon /> }
];
const MyMenu = ({ onMenuClick, logout }) => (
<div>
{ menuItems.map(item => (
<MenuItemLink
key={item.name}
to={`/${item.name}`}
primaryText={item.text}
leftIcon={item.icon}
onClick={onMenuClick}
/>
))}
<Responsive
small={logout}
medium={null}
/>
</div>
);
const MyLayout = props => <Layout {...props} menu={MyMenu} appBar={MyAppbar} />;
export default MyLayout;
这篇关于react-admin 创建一个可以从侧边菜单访问的自定义页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!