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

发布时间：2020-12-15 20:43:17 所属栏目：百科来源：网络整理

导读：我是React的一个noobie,我试图做一个Bootstrap下拉菜单.我附带的html是在这里： ul class="dropdown-menu" id="dropdown"/ul 这里是我想放在我的render方法中插入我的html： render: function() { return ( lia href="#books"Books/a/li lia href="#podcasts

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!