在React Bootstrap下拉菜单中添加图片

Question

我正在使用React Bootstrap和React Router Bootstrap来创建我的导航栏，并制作一个用户个人资料的下拉菜单列表。

我希望能够在“title”属性的位置上显示用户的头像。（与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）还是普通下拉菜单（直角 Dropdown）哪一个更好？我并没有看出“NavDropdown”对HTML有什么实质性的改进。

- michaelreeves

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。

- Marre

---

你可能会收到这样的警告：Failed prop type: Invalid prop title of type object supplied to DropdownToggle, expected string. in DropdownToggle - John Ding

Answer 2

你还可以使用 <Image /> 组件，例如。

const UserMenu = (
  <Image
    src={'https://github.com/mshaaban0.png'}
    alt="UserName profile image"
    roundedCircle
    style={{ width: '40px' }}
  />
)

<NavDropdown id="nav-dropdown-dark-example" title={UserMenu}>
//....
</NavDropdown>

- Moe Shaaban