如何在React中制作一个带有Bootstrap下拉菜单的组件

Question

我是一个React的新手，正在尝试制作一个Bootstrap下拉菜单。 我附加的HTML如下：

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

这是我想要放入我的render方法中，在HTML中插入的内容：

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。

- jhamm

Answer 1

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父元素。

- konsumer

---

当我使用这个功能时，当我点击其中一项时，下拉菜单不会关闭。我看过 React Bootstrap 的作者本人承认下拉菜单还需要进行很多工作。所以我认为现在接受这个回答还为时过早。 - Andy

请查看 react-bootstrap 的 Github 上的这个 问题。 - Andy

有关如何使用事件处理程序的文档或示例吗？我甚至连它们是什么都无法直觉，更别说在哪里/如何附加它们了... - GreenAsJade

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

大家好，这个组件是否允许多级导航？或者你知道有一个可以做到的吗？ - Patrick Ferreira

Answer 2

不幸的是，这是React中一个令人讨厌的情况，即render只能返回单个节点。你最好是从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中，我们希望取消这个限制，使得像你原来的代码那样的方式可以工作。

- Sophie Alpert

---

应该是 className="dropdown-menu"。 - konsumer

很奇怪，当我添加类名 dropdown-menu 时，它无法呈现下拉菜单。但是当我删除该类名时，它突然可以工作，但会移动周围的导航栏（不希望的行为）。 - rom

Answer 3

你可以使用 react-select react 组件。它非常简单易用。

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}
/>

- WitVault

Answer 4

如果你不想使用类似于 react bootstrap 这样的重建依赖项来同时使用 react 和 bootstrap，那么只需执行它们所做的重要 js 技巧。在你的情况下，基本上是一个 dropdown 点击事件通过 .show css 类来切换 popper 包装器。因此，你可以定义一个 onClick 方法并在其中切换类。例如，在以下代码中，我获取了 nextSibling，然后使用 .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>

请注意，这些技巧仅适用于您的项目中缺少少量 Bootstrap 功能的情况。否则，请使用重建依赖项以获得干净和标准的代码。

- Amirhossein Mehrvarzi