reactJS에서 반응식 스트랩 드롭 다운을 사용자 정의하는 방법

Question

ReactJS로 샘플 애플리케이션을 작성하고 boostrap에 반응 스트랩을 설치하십시오. 잘 작동하는 응용 프로그램의 드롭 다운 구성 요소를 사용합니다. 코드는

<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 가지를 전달하는 방법?

나는 사전에 http://prntscr.com/f34zoo

덕분에이 이미지에 드롭 다운 유사한 확인해야

Answer 1

사용자 정의 메뉴 항목을 가질 수 있습니다 : 그것은 공식 웹 사이트에 지정된대로

:

을

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