反应敏感的Navbar

Question

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

在我的React组件中，是否可以使用调整大小监听器并使用vanilla-javascript移动DOM元素？ 或者有更好的React方法来做到这一点吗？

更新 这里是一个简单的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＆amp; updateDocWidth改变状态的功能：

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

并在render（）返回前添加window.onresize = this.updateDocWidth，其余部分都是关于渲染。