javascript - react 响应式导航栏

Question

我有一个标准导航栏，其中大约有 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

只要思考就可以 react 。

您可能需要 toggleNav 和 updateDocWidth 函数来更改状态:

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

并在render()的return之前添加window.onresize = this.updateDocWidth，剩下的就是渲染了。