Javascript 反应灵敏导航条

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

在我的React组件中，可以使用普通javascript调整侦听器的大小并移动DOM元素吗？ 还是有更好的应对方式

更新： 下面是一个简单的jquery代码笔，它显示了以下原理：

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

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

render（）{
设navItems=[
{标题：“主页”，链接：“/”}，
{标题：“新闻”，链接：“/news”}，
{标题：“组织”，链接：“/organization”}，
{标题：“人”，链接：“/people”}
];
返回(
{navItems.map（（项）=>{
返回(
);
})}
);
}

谢谢你的帮助。

想一想就可以了

您可能需要

toggleNav

和

updatedcwidth

函数来更改状态：

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

在render（）中返回之前添加

window.onresize=this.updatedcwidth

，其余的都是关于渲染的。

只需像react一样思考

您可能需要

toggleNav

和

updatedcwidth

函数来更改状态：

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

并在render（）中返回之前添加

window.onresize=this.updatedcwidth

，其余的都是关于渲染的