如何使用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>
  );
}

这看起来大致相同,但有事件处理程序并添加所有正确的类.正如@ ben-alpert所说,render必须返回单个DOM父元素.

不幸的是,这是React只返回单个节点的能力render令人讨厌的一种情况.你最好的选择可能是<ul>从渲染中返回自己:

render: function() {
  return (
    <ul className="dropdown-menu" id="dropdown">
      <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>
    </ul>
  );
}

然后将整个组件渲染到另一个容器中,如a <div>.在React的未来版本中,我们希望删除此限制,以便像您的原始代码一样.