reactjs - 将图像添加到 React Bootstrap 下拉列表

Question

我正在为我的导航栏使用 React Bootstrap 和 React Router Bootstrap，并且我正在制作一个用户配置文件下拉菜单列表。

我希望能够显示用户的头像来代替“标题”属性。 (与 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。