メニューをネストされたリストのように見えるようにするには

Question

私は非常に反応して管理しやすいので、このような確かな基礎知識はありません。簡単な質問であれば容赦してください。

メニューをネストリストのように設定するにはどうすればよいですか？現在私はカスタムメニューを持っていて、このmenu.jsの中には、material-ui docsのように、その中にmenuItemを入れてMenuItemを入れ子にしています。

しかし、それは私が望む方法ではありません、私はネストされたリストを作成し、私のメニューとして渡したいですが、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);