Question

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

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

但它看起来不像我想要的，我想制作一个嵌套列表并将其作为我的菜单传递，但我无法弄清楚如何使用admin-on-rest docs来做到这一点。

Answer 1

我也是新手，刚刚开始学习React。我完全需要你提出的问题以及我想出的内容。请注意，它可能不适合我仍在学习的React / AOR最佳实践。对不起，我翻录了i18n /翻译相关代码。

希望它仍有帮助..

// 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);

如何使我的菜单看起来像嵌套列表

1 个答案: