reagieren: Menü + Untermenü + Inhalt

Question

Ich lerne React JavaScript-Bibliothek. Ich möchte eine einfache Web-App mit dem folgenden Layout erstellen: Menü + Untermenü + Inhalt. Ich verwende react 15.0.2, react-router 2.4.0, babel 6.5.2 und webpack 1.13.0.

Ich bin in der Lage, Menü + Inhalt Layout zu erstellen, aber ich weiß nicht, was ist die beste Vorgehensweise, um einen Untermenüabschnitt hinzuzufügen.

Meine app sieht wie folgt aus:

Home ~ About ~ Contact ~ Profile 

content... 

ich ein Untermenü unter dem Profil Menüpunkt hinzufügen möchten, aber die ersten drei Menüpunkte haben nicht Untermenü. Wenn ich also auf den Link Über mich und Kontakt klicke, möchte ich den richtigen Inhalt in der Hauptmenüleiste sehen. Wenn ich auf den Link Profil klicke, muss ein Untermenü angezeigt werden. Klicken Sie auf die Menüpunkte der Inhalt unter dem Menü + Untermenü Paare angezeigt werden muss:

Home ~ About ~ Contact ~ Profile 

Profile-Submenu 1 ~ Profile-Submenu 2 ~ ... 

content... 

App.js

ReactDom.render(
    <Router> 
     <Route component={MainLayout}> 
      <Route path="/" component={Home} /> 
      <Route path="home" component={Home} /> 
      <Route path="about" component={About} /> 
      <Route path="contact" component={Contact} /> 
      <Route path="profile" component={Profile} /> 
     </Route> 
    </Router>, 
    document.getElementById('root') 
); 

MainLajout.js

export default class MainLayout extends React.Component { 
    render() { 
     return (
      <div> 
       <MainMenu /> 
       <main>{this.props.children}</main> 
      </div> 
     ); 
    } 
} 

MainMenu.js

export default class MainMenu extends React.Component { 
    render() { 
     return (
      <div style={style.container}> 
       <Link to='/'>Home</Link> 
       {'\u00a0'}~{'\u00a0'} 
       <Link to='/about'>About</Link> 
       {'\u00a0'}~{'\u00a0'} 
       <Link to='/contact'>Contact</Link> 
       {'\u00a0'}~{'\u00a0'} 
       <Link to='/profile'>Profile</Link> 
      </div> 
     ); 
    } 
} 

Könnten Sie bitte führen Sie mich in die richtige Richtung?

Answer 1

Sie wahrscheinlich den aktuellen Pfad als Stütze zu MainMenu

export default class MainLayout extends React.Component { 
    render() { 
     return (
      <div> 
       <MainMenu path={this.props.location.pathname} /> 
       <main>{this.props.children}</main> 
      </div> 
     ); 
    } 
} 

dann im Hauptmenü

export default class MainMenu extends React.Component { 
    render() { 
     let submenu = null; 
     if (/^\/profile/.test(this.props.path)) { 
      submenu = <div style={style.submenu}> 
       <Link to='/profile/submenu-1'>Submenu 1</Link> 
       <Link to='/profile/submenu-2'>Submenu 2</Link> 
      </div> 
     } 
     return (<div> 
      <div style={style.container}> 
       <Link to='/'>Home</Link> 
       {'\u00a0'}~{'\u00a0'} 
       <Link to='/about'>About</Link> 
       {'\u00a0'}~{'\u00a0'} 
       <Link to='/contact'>Contact</Link> 
       {'\u00a0'}~{'\u00a0'} 
       <Link to='/profile'>Profile</Link> 
      </div> 
      {submenu} 
     </div>); 
    } 
}