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

前端之家收集整理的这篇文章主要介绍了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相关文章