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

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

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

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

25

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 父元素。

11

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

3

您可以使用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}
/>
2

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

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

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

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

(988)
网络抓取和网络抓取有什么区别 (webcrawler definition)
上一篇
仅CSS动画-如何填充svg心脏图标
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(64条)