1

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

提前致谢

4

2 回答 2

6

可以有自定义菜单项：

正如官方网站上指定的那样：

<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>
于 2017-05-02T07:13:06.760 回答
5

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

<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你也可以指定tagprop。

于 2019-07-30T10:34:46.817 回答