Wie man ein Glyphicon zu NavDropdown in ReactBootstrap hinzufügt

Question

Ich versuche, ein Glyphicon zu einem NavDropdown in React Bootstrap hinzuzufügen. Ich weiß, dass Sie es zu einem normalen Dropdown wie folgt hinzufügen können, wie in der Dokumentation erläutert.

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

Was ich versucht habe:

1. Funktioniert nicht:

<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. Funktioniert nicht:

<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. Funktioniert aber die caret nicht mit dem Text ausgerichtet und es erscheint in einer neuen Zeile:

<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

Sie können versuchen, einen Titel durch die <Glyphicon /> Komponente wie folgt passieren:

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

(Update) Oder wir können Ihren Ansatz verwenden, aber mit kleinen Fix für div Stil. Der Schriftstil bricht in diesem Fall nicht zusammen.

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

Und Sie werden wahrscheinlich brauchen text-decoration: underline Stil deaktivieren Drop-down besser aussehen zu lassen. Zum Beispiel mit dieser CSS-Regel:

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