反応するNavbarを反応させる

Question

私はお互いの隣に約8つのオプションを持つ標準Navbarを持っています。 私は自分のウィンドウのサイズを変更するときに、水平スクロールバーを使わずにできるだけ多くのオプションを表示したい。 他のオプションは[詳細を表示]ドロップダウンに表示されます。

リサイズコンポーネントでリサイズリスナーを使用し、DOM要素をvanilla-javascriptで移動することはできますか？ これを行うにはより良いリアクション方法がありますか？

UPDATE：助けを

render() { 
    let navItems = [ 
    {title: "home", link: "/"}, 
    {title: "news", link: "/news"}, 
    {title: "organisation", link: "/organisation"}, 
    {title: "people", link: "/people"} 
    ]; 

    return (
    <Nav> 
     {navItems.map((item) => { 
     return (
      <NavItem title={item.title} link={item.link} /> 
     ); 
     })} 
    </Nav> 
); 
} 

ありがとう： http://codepen.io/sstraatemans/pen/MJNGaL

これは私のコンポーネントの私のrenderメソッドである：ここ は、単純なjqueryのcodepen魔女である原理が示されています。

Answer 1

ただ反応すると思います。

あなたは状態変更するtoggleNav & updateDocWidth機能が必要になる場合があります）

this.state = { 
    doc_width: document.body.clientWidth, 
    show_nav: false 
} 

をし、（レンダリングで復帰する前window.onresize = this.updateDocWidthを追加し、残りのすべては、レンダリングについてです。