จะสร้างเมนูย่อยสำหรับลิงค์ nav ได้อย่างไร?

สวัสดี ฉันเพิ่งเกิดปฏิกิริยาและต้องการนำเมนูย่อยไปใช้กับเมนูของฉัน

สิ่งที่ฉันต้องการคือรายงานนี้ › รายงานของฉัน › รายงาน MIS

ฉันกำลังนำเข้าและใช้ NavLink จาก React Router Dom

เมนูปัจจุบันมีลักษณะเช่นนี้โดยไม่มีเมนูย่อย:

นี่คือรหัสของฉันที่ฉันใช้ลิงก์แถบนำทาง:

export const mainListItems = (
  <List>
    <NavLink to="dashboard">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Dashboard" />
      </ListItem>
    </NavLink>
    <NavLink to="userform">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Registration" />
      </ListItem>
    </NavLink>
    <NavLink to="">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Report" />
      </ListItem>
    </NavLink>
  </List>
);
This is the link in my App.js

const App = () => (
  <HashRouter>
    <Switch>
      <Route path="/signin" component={SignIn} />
      <Route path="/userform" component={UserForm} />
      <Route path="/dashboard" component={Dashboard} />

      <Redirect from="/" to="signin" />
    </Switch>
  </HashRouter>
);
I need some direction in this. How do I implement my own sub menus

reactjs material-ui react-router-dom react-router
person sandeep pradhan    schedule 30.08.2020    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

Ciao สำหรับการนำทางแบบซ้อน คุณสามารถใช้ส่วนประกอบ ListItem และ Collapse จาก Material UI ดังนี้:

       <ListItem button onClick={this.handleClick}>  // Report level
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Report" />
          {open ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
        <Collapse in={open} timeout="auto" unmountOnExit>  //first nested level
          <List component="div" disablePadding>
            <ListItem
              button
              style={styles.nested}
              onClick={this.handleClickSecondLevel}
            >
              <ListItemIcon>
                <StarBorder />
              </ListItemIcon>
              <ListItemText primary="My Report" />
              {openSecondLevel ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            <Collapse in={openSecondLevel} timeout="auto" unmountOnExit>  // second nested level
              <List component="div" disablePadding>
                <ListItem button style={styles.nestedSecondLevel}>
                  <ListItemIcon>
                    <StarBorder />
                  </ListItemIcon>
                  <ListItemText primary="MIS Report" />
                </ListItem>
              </List>
            </Collapse>
          </List>
        </Collapse>

ที่นี่ ตัวอย่าง codesandbox ที่ใช้คอมโพเนนต์คลาส

person Giovanni Esposito    schedule 30.08.2020
comment
สวัสดีจิโอวานนี่ ขอบคุณอีกครั้ง แต่คุณช่วยระบุแซนด์บ็อกซ์สำหรับโค้ดที่ให้มาได้ไหม ถ้าไม่ขอมากเกินไป? - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan ฉันทำเอง :) ที่นี่ codesandbox.io/ s/material-demo-forked-4s2db?file=/demo.js - person Giovanni Esposito; 30.08.2020
comment
สวัสดีจิโอวานนี่ ขอบคุณอีกครั้ง แต่เมื่อฉันพยายามนำเข้ามันกลับไม่ได้ผลอะไรเลย - person sandeep pradhan; 30.08.2020
comment
ฉันกำลังส่งออกและนำเข้าไอคอน const ดังนั้นจึงมีปัญหาเกิดขึ้นใช่ไหม - person sandeep pradhan; 30.08.2020
comment
หากต้องการใช้โค้ดของฉันกับของคุณ คุณเพียงแค่ต้องแทนที่ ListItem ของคุณด้วย ListItem ของฉัน (โดยเก็บ NavLink ไว้) อีกประการหนึ่ง: ฉันไม่รู้ว่าคุณกำลังนำเข้าไอคอนใด แต่ตามรหัสของคุณ คุณไม่ได้ใส่ไอคอนใด ๆ ใน ListItemIcon ลองดำเนินการบางอย่างเช่น: <ListItemIcon><StarBorder /></ListItemIcon> แล้วคุณจะเห็นไอคอนรูปดาวใกล้กับ ListItem - person Giovanni Esposito; 30.08.2020
comment
สิ่งที่คุณให้ไว้ในคำตอบใช่ไหม ไม่ใช่ในแซนด์บ็อกซ์ใช่ไหม - person sandeep pradhan; 30.08.2020
comment
ฉันจะใส่ const และฟังก์ชันต่างๆ ในแซนด์บ็อกซ์ได้ที่ไหน - person sandeep pradhan; 30.08.2020
comment
ฉันยังใส่ this.state ในฟังก์ชัน const ที่ให้ไว้ไม่ได้ด้วย - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan เป็นการยากที่จะตอบโดยไม่เห็นรหัสของคุณ คุณมี repo github ที่จะแบ่งปันหรือไม่? - person Giovanni Esposito; 30.08.2020
comment
ใช่ ฉันกำลังสร้าง repo - person sandeep pradhan; 30.08.2020
comment
สวัสดีจิโอวานนี่ ไม่ ฉันไม่มี repo ข้อเสนอแนะอื่นใดอีกไหม - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan คุณสามารถสร้าง codesandbox ที่มีส่วนสำคัญ (การนำทาง ส่วนหนึ่งของโค้ดของคุณที่ใช้งานไม่ได้) และอธิบายพร้อมความคิดเห็นว่าคุณต้องการการนำทางแบบซ้อนตรงไหน - person Giovanni Esposito; 30.08.2020