如何在 Reactjs 中显示子菜单？

Posted 2023-03-06

【中文标题】如何在 Reactjs 中显示子菜单？

【英文标题】：How to display submenu in Reactjs?

【发布时间】：2020-04-21 15:41:24

【问题描述】：

我正在使用 reactstrap (Bootstrap) css 框架在 reactjs 中制作应用程序。我正在尝试制作一个带有菜单和子菜单的导航栏（只有一级子菜单）。

Working Demo

我正在努力在单个 JS 文件中实现这一目标，

Example.JS

<UncontrolledButtonDropdown>
   <DropdownToggle caret size="md">
      Menu 1
   </DropdownToggle>

   <DropdownMenu>
      <span> Sub Menu 1 </span>
      <DropdownItem>Sub Menu 1.1</DropdownItem>
      <DropdownItem>Sub Menu 1.2</DropdownItem>

      <span> Sub Menu 2 </span>
      <DropdownItem>Sub Menu 2.1</DropdownItem>
      <DropdownItem>Sub Menu 2.2</DropdownItem>
   </DropdownMenu>
</UncontrolledButtonDropdown>

我只需要以上部分。

我在点击切换按钮时列出了一个下拉菜单，我将Menu 1 作为下拉菜单。

对于普通视图，让它保持原样，但对于 responsive 视图，菜单应该按顺序显示。

所以它看起来像，

带有下拉菜单的导航栏

点击父菜单（Menu 1），Sub Menu 1 部分需要显示为，

在另一个视图中单独列出子菜单的下拉菜单

所以在这里您可以看到菜单将首先显示，然后单击菜单，子菜单需要单独显示在另一个视图上。

如果有人可以帮助我在纯引导没有 jquery 的情况下做同样的事情，那也没关系。

【参考方案1】：

对于响应式下拉菜单，我认为您不能使用 reactstrap 库。但是，您可以使用引导库来呈现响应式下拉菜单。关注这个link。

【讨论】：

你能以引导方式提供解决方案以在没有 jquery 的情况下实现相同的目标吗？由于它是 reactjs 应用程序，我们不应该在其中使用 jquery，但是 bootstrap 带有 jquery ..

在这种情况下，您可以使用 react-bootstrap 库。您可以使用像这样的下拉方向react-bootstrap.github.io/components/dropdowns/#drop-directions

对不起，这不是我的期望。我已经完成了下拉菜单，但如果我点击菜单，则需要显示子菜单。