如何使用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>

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

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

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

相关推荐

  • bootstrap css下载:Welcome to Bootstrap!

    Bootstrap是一种开源的用于创建网站和Web应用程序的前端框架。它使用HTML、CSS和JavaScript来构建响应式布局,以便在不同设备上提供最佳的用户体验。…

    2023-05-31 05:00:12
    0 74 18
  • 登录前带光标的黑屏(windows black screen on boot)

    我已经尝试了所有可能的解决方案来解决互联网上给出的问题。但是我的问题没有解决。所以我想重置我的电脑。如果是这样,我的电脑就会恢复正常状态。以前我已经重新设置了我的电脑,因为另一个问题。我的重置选项是否再次起作用。我的朋友说重置选项只能起作用一次...有人建议我该怎么办吗?…

    2022-11-24 01:50:57
    0 83 16
  • java中static修饰的变量:静态变量在Java中的应用

    static修饰的变量是一个静态变量,也称为类变量,它属于类,而不属于某个对象。静态变量在内存中只有一个副本,所有的对象共享这一个副本。…

    2023-04-16 09:28:00
    0 29 43
  • cv小敢:如何利用CV小敢提升职业技能?

    cv小敢(Computer Vision Tiny-YOLO)是一种轻量级的物体检测算法,它可以在资源受限的设备上运行,如嵌入式设备、智能手机等。它是基于YOLO(You Only Look Once)算法的一个变体,由Joseph Redmon和Ali Farhadi开发,旨在提高深度学习模型的性能,同时减少模型的大小和计算复杂度。…

    2024-07-08 14:57:48
    0 75 79
  • win7玩cf卡顿怎么解决:解决Win7环境下CF游戏卡顿问题

    尝试更新系统:可能是由于系统缺少某些补丁或者更新导致CF卡顿,可以尝试在Windows Update中进行检查更新,并安装最新的补丁和更新。更新显卡驱动:可能是由于显卡驱动过旧或者不兼容导致CF卡顿,可以尝试更新显卡驱动,可以到显卡厂商官网下载最新的驱动进行安装。…

    2023-04-10 10:31:26
    0 10 84
  • csv文件转成excel的数据:张三、90、80、170李四、95、85、180王五、85、75、160赵六、80、70、150

    使用python的csv模块读取csv文件:import csv…

    2023-04-27 14:15:35
    0 76 94
  • zip postal code是什么意思了解如何获取和使用它

    示例示例zip postal code是邮政编码的简称,是由一系列数字和字母组成的一种地址编码,可以用来标识某一特定地址。例如:…

    2023-08-18 12:36:27
    0 41 46
  • congo是什么意思一个神秘而又充满魅力的国度

    Congo是一种轻量级的分布式计算框架,它可以用来快速构建分布式应用。它支持多种数据存储和计算技术,例如MapReduce、Spark、Hadoop等,并且支持多种语言,包括Java、Python、Scala等。…

    2024-06-23 06:48:44
    0 79 57

发表评论

登录 后才能评论

评论列表(50条)