如何使用React制作Bootstrap下拉列表

Question

我是一个noobie at React,我正在努力做一个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.

Answer 1

反应引导使得使用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父元素.

Answer 2

不幸的是,这是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的未来版本中,我们希望删除此限制,以便像您的原始代码一样.