如何在 reactJS 中自定义 reactstrap 下拉菜单

Posted 2023-03-23

【中文标题】如何在 reactJS 中自定义 reactstrap 下拉菜单

【英文标题】：How customize reactstrap dropdown in reactJS

【发布时间】：2017-09-29 15:03:19

【问题描述】：

使用 ReactJS 创建示例应用程序并为 boostrap 安装 reactstrap。我在运行良好的应用程序中使用下拉组件。代码是

<Dropdown isOpen=this.state.dropdownOpen toggle=this.toggle>
    <DropdownToggle caret>
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown> 

但我必须改变。

就像目前他们只传递文本

。但是

我必须传递 3 个东西，例如图标、标题和子标题

那么我可以为这种类型的自定义更改 DropdownItem.js 代码吗？

我必须制作类似于这张图片的下拉菜单http://prntscr.com/f34zoo

提前致谢

【参考方案1】：

可以有自定义菜单项：

正如在the official website上指定的那样：

<Dropdown isOpen=this.state.dropdownOpen toggle=this.toggle>
   <span
      onClick=this.toggle
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded=this.state.dropdownOpen
      >
   Custom Dropdown Content
   </span>
   <DropdownMenu>
      <div onClick=this.toggle>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
      <div onClick=this.toggle>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
      <div onClick=this.toggle>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
   </DropdownMenu>
</Dropdown>

【讨论】：

好的明白，所以我们不需要为自定义样式的下拉菜单更改 DropdownItem.js 吗？

是的，您可以传递 html 元素而不仅仅是文本，然后使用 CSS 对其进行自定义。

请检查“自定义下拉菜单”部分。

【参考方案2】：

有更好的方法来做到这一点。 如果您希望下拉切换类似于：

<div>
  <span>selectedShop ? selectedShop.shopCity : ''</span>
  <FaChevronDown />
</div>

那么你的 DropdownToggle 应该是这样的（参见tag 属性）：

<DropdownToggle tag="div">
  <span>selectedShop ? selectedShop.shopCity : ''</span>
  <FaChevronDown />
</DropdownToggle>

标签 props 采用 html 标签来包装下拉切换内容。现在你可以随心所欲地为你的 div 设置样式。

注意：默认情况下，tag 是 button。

现在，对于您的下拉项目。你可以简单地做这样的事情：

<DropdownItem onClick=() => onShopChange(shopToMap)>
  <i class="some-icon" />
  <h3>Some heading</h3>
  <p>Some sub heading</p>' '
</DropdownItem>

注意：即使对于 DropdownItem，您也可以指定 tag 属性。

【讨论】：

非常简单干净的解决方案

这应该是公认的答案，让您完全控制切换的呈现方式