Question

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

提前致谢

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

Answer 2

有一种更好的方法。如果您希望下拉开关像这样：

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

然后您的DropdownToggle应该类似于（请参见tag属性）：

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

标签props使用html标签来包装下拉切换内容。现在，您可以按照自己的方式为ur div设置样式。

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

现在，对于您的下拉菜单项。您可以简单地执行以下操作：

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

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

如何定制reactJS中的reactstrap下拉列表

2 个答案: