如何使用 React 制作 Bootstrap 下拉菜单

Posted 2023-02-21

【中文标题】如何使用 React 制作 Bootstrap 下拉菜单

【英文标题】：How to make a Bootstrap dropdown with React

【发布时间】：2014-04-12 20:03:09

【问题描述】：

我是React 的菜鸟，我正在尝试制作Bootstrap 下拉菜单。我要附加的 html 在这里：

<ul class="dropdown-menu" id="dropdown">
</ul>

这是我想在我的 render 方法中插入的内容：

render: function() 
  return (
      <li><a href="#books">Books</a></li>
      <li><a href="#podcasts">Podcasts</a></li>
      <li><a href="#">Tech I Like</a></li>
      <li><a href="#">About me</a></li>
      <li><a href="#addBlog">Add a Blog</a></li>
    );

当然我只能返回一个元素。在React 中这样做的正确方法是什么？如何将多个<li> 添加到这样的下拉列表中？我尝试将整个内容包装在 <div> 中，但这会弄乱我的 css。

【参考方案1】：

不幸的是，在这种情况下，React 只能从 render 返回单个节点的能力很烦人。您最好的选择可能是从渲染中返回 <ul> 本身：

render: function() 
  return (
    <ul className="dropdown-menu" id="dropdown">
      <li><a href="#books">Books</a></li>
      <li><a href="#podcasts">Podcasts</a></li>
      <li><a href="#">Tech I Like</a></li>
      <li><a href="#">About me</a></li>
      <li><a href="#addBlog">Add a Blog</a></li>
    </ul>
  );

然后将整个组件渲染到另一个容器中，例如 <div>。在未来的 React 版本中，我们希望删除这个限制，以便像您的原始代码一样工作。

【讨论】：

应该是className="dropdown-menu"。

【参考方案2】：

react bootstrap 让使用 react 和 bootstrap 变得更容易：

render: function()
  return (
    <DropdownButton title="Dropdown">
      <MenuItem href="#books">Books</MenuItem>
      <MenuItem href="#podcasts">Podcasts</MenuItem>
      <MenuItem href="#">Tech I Like</MenuItem>
      <MenuItem href="#">About me</MenuItem>
      <MenuItem href="#addBlog">Add a Blog</MenuItem>
    </DropdownButton>
  );

这看起来差不多，但有事件处理程序并添加了所有正确的类。不过，正如@sophie-alpert 所说，render 必须返回单个 DOM 父元素。

【讨论】：

react-bootstrap 在我问这个问题时不在，但目前这应该是公认的答案。

当我使用它时，当我单击其中的一个项目时，下拉菜单不会关闭。我见过 react bootstrap 的作者自己承认需要在下拉菜单上做很多工作。所以我认为现在接受这个答案还为时过早

在 react-bootstrap 的 github 中查看 issue

是否有关于如何使用事件处理程序的文档或示例？我什至无法直觉它们是什么，更不用说在哪里/如何连接它们了......

找到它，就在它应该在的地方...react-bootstrap.github.io/components.html#menu-items

【参考方案3】：

你可以使用react-selectreact组件。非常简单好用。

var Select = require('react-select');

var options = [
 value: 'one', label: 'One' ,
 value: 'two', label: 'Two' 
];

function logChange(val) 
console.log("Selected: " + val);
 

<Select
  name="form-field-name"
  value="one"
  options=options
  onChange=logChange
/>

【参考方案4】：

如果您不想使用像 react bootstrap 这样的重建依赖项来处理 react 和 bootstrap，只需执行他们所做的重要 js 技巧。在您的情况下，基本上 dropdown 单击事件会使用 .show css 类切换 popper 包装器。因此，您可以定义一个onClick 方法并在其中切换类。例如，在下面的代码中，我得到 nextSibling，然后 toggle 使用 .show 得到它的类名，最后将显示内部 div：

<div className="dropdown">
    <a className="btn text-light" href="#" onClick=(e) => this.handleOption(e)>open dropdown</a>
    <div className="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
        <a className="dropdown-item" href="#">edit</a>
        <a className="dropdown-item" href="#">delete</a>
    </div>
</div>

请注意，如果项目中的引导功能很少，此技巧可以帮助您，否则使用重建的依赖项来获得干净和标准的代码。