reactjs - 如何在 ReactBootstrap 中向 NavDropdown 添加 Glyphicon

Question

我正在尝试将字形添加到 React Bootstrap 中的 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;
}