reactjs - 如何使用 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。

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