如何在ReactBootstrap中添加一個Glyphicon到NavDropdown

Question

我試圖在React Bootstrap中添加一個glyphicon到NavDropdown。 我知道你可以像這樣將它添加到正常的Dropdown，正如文檔中所述。

<Dropdown id="dropdown-custom-1"> 
    <Dropdown.Toggle> 
    <Glyphicon glyph="star" /> 
    Pow! Zoom! 
    </Dropdown.Toggle> 
    <Dropdown.Menu > 
    <MenuItem eventKey="1">Action</MenuItem> 
    <MenuItem eventKey="2">Another action</MenuItem> 
    </Dropdown.Menu> 
</Dropdown> 

我已經試過什麼：

1不起作用：

<NavDropdown eventKey={3} id="basic-nav-dropdown"> 
     <NavDropdown.Toggle> 
     <Glyphicon glyph="star" /> 
     Pow! Zoom! 
     </NavDropdown.Toggle> 
     <MenuItem eventKey={3.1}>Action</MenuItem> 
     <MenuItem eventKey={3.2}>Another action</MenuItem> 
    </NavDropdown> 

2.不起作用：

<NavDropdown eventKey={3} title={<Glyphicon glyph="star" /> Dropdown} id="basic-nav-dropdown"> 
     <MenuItem eventKey={3.1}>Action</MenuItem> 
     <MenuItem eventKey={3.2}>Another action</MenuItem> 
    </NavDropdown> 

3.正常工作，但插入符號不與文本對齊，它出現在一個新行：

<NavDropdown eventKey={3} title={<div><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown"> 
     <MenuItem eventKey={3.1}>Action</MenuItem> 
     <MenuItem eventKey={3.2}>Another action</MenuItem> 
    </NavDropdown> 

Answer 1

您可以嘗試通過<Glyphicon />組件這樣通過一個標題：

render() { 
    const navDropdownTitle = (<Glyphicon glyph="star"> Dropdown </Glyphicon>); 
    return (
     <NavDropdown title={navDropdownTitle} eventKey={3} id="basic-nav-dropdown"> 
      <MenuItem eventKey={3.1}>Action</MenuItem> 
      <MenuItem eventKey={3.2}>Another action</MenuItem> 
     </NavDropdown> 
    ) 
} 

（更新）或者我們可以使用你的方法，但對於div風格的小修補。在這種情況下，字體樣式不會中斷。

<NavDropdown eventKey={3} title={<div style={{display: "inline-block"}}><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown"> 
    <MenuItem eventKey={3.1}>Action</MenuItem> 
    <MenuItem eventKey={3.2}>Another action</MenuItem> 
</NavDropdown> 

而且您可能需要禁用text-decoration: underline樣式才能使下拉式樣更好看。 比如這個CSS規則：

a.dropdown-toggle { 
    text-decoration: none; 
}