reactjs – 如何使用React创建Bootstrap下拉列表

我是React的一个noobie,我试图做一个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变得混乱.

react bootstrap使用反应& 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>
  );
}

这看起来是一样的,但有事件处理程序和添加所有正确的类.正如@ ben-alpert所说,虽然,render必须返回一个单一的DOM父元素.

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...