如何使用React制作Bootstrap下拉列表-码文网

我是一个 noobie 在React，我试图做一个Bootstrap下拉列表。

<ul cl="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使使用 react & amp;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>
  );
}

这看起来差不多，但是有事件处理程序 & amp;添加所有正确的类。正如 @ sophie-alpert 所说，render必须返回一个 DOM 父元素。

不幸的是，这是一种情况，React 只能从render返回单个节点的能力很烦人。您最好的选择可能是从渲染返回<ul>本身：

render: function() {
  return (
    <ul clName="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 的未来版本中，我们希望删除此限制，以便像您的原始代码一样工作。

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

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}
/>

如果您不想使用像react bootstrap这样的重新构建的依赖关系来处理 react 和 bootstrap，只需执行它们所执行的重要 js 技巧。在您的情况下，基本上是dropdownclick 事件将使用.showcss 类切换 popper 包装器。因此，您可以使用onClick

<div clName="dropdown">
    <a clName="btn text-light" href="#" onClick={(e) => this.handleOption(e)}>open dropdown</a>
    <div clName="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
        <a clName="dropdown-item" href="#">edit</a>
        <a clName="dropdown-item" href="#">delete</a>
    </div>
</div>

请注意，这个技巧可以帮助您在项目中的引导功能很少的情况下，否则采用重建的依赖关系来获得干净和标准的代码。

本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处