如何在 ReactBootstrap 中将 Glyphicon 添加到 NavDropdown

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 样式以使 drop-down 看起来更好。例如这个 css-rule:

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

如何在 ReactBootstrap 中将 Glyphicon 添加到 NavDropdown

How to add a Glyphicon to NavDropdown in ReactBootstrap

reactjs

react-bootstrap