反応：メニュー+サブメニュー+コンテンツ

Question

私はReact JavaScript libraryを学習しています。 私は以下のレイアウトで簡単なweb-appを作成したいと思います：メニュー+サブメニュー+コンテンツ。私は反応15.0.2、反応ルータ2.4.0、バベル6.5.2、ウェブパック1.13.0を使用します。

私はメニュー+コンテンツレイアウトを作成できますが、サブメニューセクションを追加するのがベストプラクティスであるかどうかわかりません。

マイアプリは次のようになります。

Home ~ About ~ Contact ~ Profile 

content... 

私はプロフィールのメニュー項目の下にサブメニューを追加したいのですが、最初の3つのメニュー項目がサブメニューを持っていません。私がAboutとContactのリンクをクリックすると、メインメニューバーの下に適切なコンテンツが表示されます。プロファイルリンクをクリックすると、サブメニューが表示される必要があります。

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

私を案内してください正しい方向へ？

Answer 1

おそらく、その後、あなたのメインメニュー

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