如何在reactJS中自定義reactstrap下拉菜單

使用ReactJS創建示例應用程序並安裝boostrap的reactstrap。我在正常工作的應用程序中使用下拉組件。代碼是如何在reactJS中自定義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

在此先感謝

來源

2017-05-02 Paresh Gami

它可能有自定義菜單項：

由於它的官方網站上規定：

<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-02 07:13:06 Shota

好吧，明白了，所以我們不需要更改DropdownItem.js的自定義樣式下拉右？ –

是的，您可以傳遞您的HTML元素而不是文本，然後使用CSS進行自定義。 – Shota

確定你能否提供我的官方網站，你告訴 –

如何在reactJS中自定義reactstrap下拉菜單

回答

相關問題