Display menu items in next view using reactjs

问题

The bounty expires in 4 days. Answers to this question are eligible for a +50 reputation bounty. Test User wants to draw more attention to this question: “I am new in reactjs so kindly help me to achieve this behaviour with cleaner updated solution.”

I am making reactjs application with reactstrap (Bootstrap) and I am almost done with the menu part in desktop view.

Complete react demo with menu is here

The list of steps I am in the need to implement in the above example in responsive view,

-> The main menu (Menu 1, Menu 2, Menu 3) (Already implemented)

-> The submenus under each main menu (Submenu 1.1, Submenu 1.2, ... So on) Please hover over the main menu there will be separate submenu for each main menu.( Already implemented)

Expected:

-> On click on the main menu, the respective submenu should be opened in next view.

-> Eg.., If I click on the Menu1 then their respective submenus Submenu 1.1, Submenu 1.2, Submenu 1.3 should be displayed in next view.

-> The submenu view section should have back button and upon click on the same it should get back to main menu

The expectation is exactly like the below given image,

Main Menu Section (Ignore Register, Login, My Account menu in image)

Submenu Section( Menu 1 was clicked in main menu section).

Example.Js

            <Dropdown
              key={i}
              nav
              inNavbar
              className="d-inline-block"
              onMouseOver={e => this.onMouseEnter(i)}
              onMouseLeave={this.onMouseLeave}
              isOpen={this.state.dropdownOpen === i}
              toggle={this.toggle}
            >
              <DropdownToggle nav caret>
                <span> {menu.title} </span>
              </DropdownToggle>
              <DropdownMenu>
                {menu.submenus.map((submenu, i) => (
                  <DropdownItem key={i} header>
                    {submenu.title}
                  </DropdownItem>
                ))}
              </DropdownMenu>
            </Dropdown>

It is ok for me if you modify above code or include another useful library (strictly no jquery) to achieve this. I humbly request you to please provide me the right solution like expected images given and please consider this question as I am stucked for very long time in it.

Thanks in advance.

回答1:

You simply need to set a state variable in onClick of the first page for example

 onClick={()=> this.setState({subMenuType:'submenu1' })  }

And return the subMenus conditionally.

return (
{this.state.subMenuType ===  'subMenu1' ? 
<SubMenu1/> : null }
)

来源：https://stackoverflow.com/questions/59638007/display-menu-items-in-next-view-using-reactjs