Question

我是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。

Answer 1

react bootstrap使反应和＆amp;引导程序更容易：

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>
  );
}

这看起来大致相同，但有事件处理程序＆amp;添加所有正确的类。正如@ sophie-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>
  );
}

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

Answer 3

您可以使用react-select反应组件。它非常简单易用。

var Select = require('react-select');

var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];

function logChange(val) {
console.log("Selected: " + val);
} 

<Select
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
/>

Answer 4

如果您不想使用react bootstrap之类的重建依赖项来同时使用react和bootstrap，只需执行重要的js技巧。在您的情况下，基本上，一个.show单击事件会用onClick css类切换popper包装器。因此，您可以定义一个.show方法并在其中切换类。例如，在下面的代码中，我得到 nextSibling ，然后 toggle 用div切换其类名，最后将显示内部<div className="dropdown"> <a className="btn text-light" href="#" onClick={(e) => this.handleOption(e)}>open dropdown</a> <div className="dropdown-menu dropdown-menu-left dropdown-menu-arrow"> <a className="dropdown-item" href="#">edit</a> <a className="dropdown-item" href="#">delete</a> </div> </div>：

rm *.log

请注意，如果您的项目中的自举功能很少，此技巧将为您提供帮助 ，否则，请使用重建的依赖项来获得干净且标准的代码。

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

4 个答案: