reactJSでリアストラップドロップダウンをカスタマイズする方法

Question

ReactJSでサンプルアプリケーションを作成し、ブーストラップ用のリアストラップをインストールします。私は正常に動作しているアプリケーションでドロップダウンコンポーネントを使用します。コードは

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

ですが、変更する必要があります。

現在、彼らは唯一の

テキストを渡すように。しかし、私はこの種のカスタマイズのためのDropdownItem.jsコードを変更することができます

は私が見出し、アイコンのような3つの事を渡すために持っており、サブは

を見出し？

私はこの画像にあるドロップダウンが同様にするために、事前

Answer 1

でhttp://prntscr.com/f34zoo

感謝を持っていることは、カスタムメニュー項目を持つことが可能です：

それは公式ウェブサイト上で指定されているとおり：

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