Как я могу сделать мое меню похожим на вложенный список

Question

Я очень плохо знаком с React и admin-on-rest, поэтому у меня пока нет таких основательных знаний, прошу прощения, если это простой вопрос.

Как я могу сделать свое меню похожим на вложенный список? В настоящее время у меня есть пользовательское меню, и внутри этого menu.js я установил MenuItem с menuItems внутри него, чтобы сделать его вложенным, как в документах material-ui.

Но это не выглядит так, как я хочу, я хотел бы создать вложенный список и передать его в качестве своего меню, но я не мог понять, как это сделать с помощью документов admin-on-rest.

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