React responsive Navbar

Question

我有一个标准的导航栏，旁边有大约8个选项。 当我调整我的窗口大小时，我希望显示尽可能多的选项，没有水平滚动条。 其他选项将放在“显示更多”下拉列表中。

在我的React组件中，是否可以使用调整大小侦听器并将vanilla-javascript左右移动DOM元素？ 还是有更好的反应方式来做到这一点？

UPDATE： 这里是一个简单的jQuery codepen女巫显示原理： http://codepen.io/sstraatemans/pen/MJNGaL

这是我的我的组件的渲染方法：

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

感谢您的帮助。

Answer 1

只是认为是反应。

您可能需要toggleNav & updateDocWidth功能改变的状态：

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

和渲染（返回前添加window.onresize = this.updateDocWidth），和所有其余的是有关呈现。