我怎样才能让我的菜单看起来像一个嵌套列表

Question

我是 React 和 admin-on-rest 的新手，所以我还没有这么扎实的基础知识，如果这是一个简单的问题，请原谅。

如何将我的菜单设置为看起来像嵌套列表？目前我有一个自定义菜单，在这个 menu.js 中我设置了一个带有 menuItems 的 MenuItem 以使其嵌套，就像在 material-ui docs 中一样。

但它看起来不像我想要的那样，我想制作一个嵌套列表并将其作为我的菜单传递，但我不知道如何使用 admin-on-rest docs。

Answer 1

我也是新手，刚刚开始学习React。我需要的正是你所要求的，这就是我想出的。请注意，它可能不适合 React/AOR 最佳实践，因为我仍在学习。抱歉，我撕了i18n/translation相关代码。

希望它仍然有帮助..

// Menu.js
import React from "react";
import { connect } from "react-redux";
import compose from "recompose/compose";
import { translate, DashboardMenuItem, MenuItemLink } from "admin-on-rest";
import { List, ListItem } from "material-ui/List";
import Divider from "material-ui/Divider";

const styles = {
  main: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    height: "100%",
    position: "relative"
  },
  leftNavBody: {
    overflowY: "auto",
    overflowX: "hidden",
    paddingBottom: "60px"
  },
  leftNavFooter: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    overflow: "hidden",
    paddingTop: "4px"
  }
};

const Menu = ({ onMenuTap, translate, logout }) => (
  <div style={styles.main}>
    <div style={styles.leftNavBody}>
      <DashboardMenuItem onClick={onMenuTap} />
      <MenuItemLink
        key="res1"
        to="/resource1"
        primaryText="Option 1"
        onClick={onMenuTap}
      />
      <MenuItemLink
        key="res2"
        to="/resource2"
        primaryText="Option 2"
        onClick={onMenuTap}
      />
      <Divider />
      <List>
        <ListItem
          primaryText="Sub-Menu"
          initiallyOpen={false}
          primaryTogglesNestedList
          nestedItems={[
            <MenuItemLink
              key="res3"
              to="/resource3"
              primaryText="Sub Option 1"
              onClick={onMenuTap}
            />,
            <MenuItemLink
              key="res4"
              to="/resource4"
              primaryText="Sub Option 2"
              onClick={onMenuTap}
            />,
            <MenuItemLink
              key="res5"
              to="/resource5"
              primaryText="Sub Option 3"
              onClick={onMenuTap}
            />
          ]}
        />
      </List>
    </div>
    <div style={styles.leftNavFooter}>
      <Divider />
      {logout}
    </div>
  </div>
);

const enhance = compose(
  connect(state => ({
    theme: state.theme,
    locale: state.locale
  })),
  translate
);

export default enhance(Menu);

我怎样才能让我的菜单看起来像一个嵌套列表

How can I make my menu look like a nested list

admin-on-rest