将图像添加到React Bootstrap下拉菜单

Question

我正在使用React Bootstrap和React路由器引导程序用于我的导航栏，并且正在制作用户配置文件下拉菜单列表。

我希望能够在“标题”属性的位置显示用户的头像。 （与Github上的用户配置文件下拉菜单相同）

这可能吗？我没有看到任何选项使用图片代替标题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> 

会一SplitButton或直下拉是更好的选择？我并不认为“NavDropdown”正在添加到HTML中。

Answer 1

NavDropdown的title属性可以将任何React元素作为值。这是我做的：

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

您可能需要调整一点点的CSS。