Hinzufügen eines Bildes zu React Bootstrap dropdown

Question

Ich benutze React Bootstrap und React Router Bootstrap für meine Navbar, und ich mache ein Benutzerprofil Drop-down-Menü-Liste.

Ich möchte in der Lage sein, einen Benutzer Avatar anstelle der Eigenschaft "Titel" anzeigen zu lassen. (Die gleiche Idee wie das Benutzerprofil-Dropdown auf Github)

Ist das möglich? Ich sehe keine Möglichkeiten, ein Bild zu verwenden, anstatt Titel für NavDropdown

<Navbar inverse> 
    <Navbar.Header> 
    <Navbar.Toggle /> 
    </Navbar.Header> 

    <Navbar.Collapse> 
    <Nav pullRight> 
     <NavDropdown eventKey={ 3 } id="profile-dropdown" > 
     <LinkContainer to="/profile/edit" > 
      <NavItem eventKey={ 3.4 } > Edit </NavItem> 
     </LinkContainer> 
     <LinkContainer to="/logout"> 
      <Logout eventKey={ 3.5 } /> 
     </LinkContainer> 
     </NavDropdown> 
    </Nav> 
    </Navbar.Collapse> 
</Navbar> 

Würde eines Splitbutton oder gerade Dropdown eine bessere Option? Ich sehe nicht viel, was der "NavDropdown" dem HTML hinzufügt.

Answer 1

Die Titeleigenschaft des NavDropdown kann ein beliebiges React-Element als Wert annehmen. Dies ist, was ich getan habe:

 <Nav pullRight> 
      <NavDropdown eventKey={1} 
       title={ 
        <div className="pull-left"> 
         <img className="thumbnail-image" 
          src={src} 
          alt="user pic" 
         /> 

         {user.username} 
        </div> 
       } 
       id="basic-nav-dropdown"> 

       <MenuItem eventKey={1.1} href="/profile">Profile</MenuItem> 
       <MenuItem divider /> 
       <MenuItem eventKey={1.3}> 
        <i className="fa fa-sign-out"></i> Logout 
       </MenuItem> 
      </NavDropdown> 
     </Nav> 

Sie müssen wahrscheinlich die CSS ein wenig anpassen.