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