我是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父元素.