Question

我正在为我的Navbar使用React Bootstrap和React Router Bootstrap，我正在制作用户个人资料下拉菜单列表。

我希望能够让用户的头像显示代替标题＆＃39;属性。（与Github上的用户配置文件下拉列表相同）

这可能吗？我没有看到任何使用图像而不是NavDropdown的标题的选项

dp()

SplitButton或直接Dropdown会是更好的选择吗？我并没有真正看到＆＃34; NavDropdown＆＃34;正在添加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。

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

1 个答案: