向 React Bootstrap 下拉菜单添加图标

Question

我正在尝试向我的反应下拉按钮添加一个图标，如下面的按钮所示。

我找不到用我正在使用的 react bootstrap 包来实现这个的方法。

https://react-bootstrap.github.io/

我尝试使用普通的引导程序 4 来解决这个问题。但是发现它需要jquery来打开下拉菜单。如何在我的 React Bootstrap 下拉菜单中添加图标？

我的代码

   <DropdownButton id="example-month-input-2" title={this.state.weekselectedType}>
         <Dropdown.Item onClick={() => this.changeWeekValue('a')}>A</Dropdown.Item>
         <Dropdown.Item onClick={() => this.changeWeekValue('b')}>B</Dropdown.Item>
         <Dropdown.Item onClick={() => this.changeWeekValue('c')}>C</Dropdown.Item>
   </DropdownButton>

我设法使用以下 css 删除了默认的下拉图标

.dropdown-toggle::after {
    display:none !important;
}

Answer 1

React Bootstrap 允许您Dropdown通过传入自定义子组件来进行自定义。要自定义切换按钮，您可以使用：

// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {/* Render custom icon here */}
    &#x25bc;
    {children}
  </a>
));

render(
  <Dropdown>
    <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
      Custom toggle
    </Dropdown.Toggle>

    <Dropdown.Menu>
      <Dropdown.Item eventKey="1">Red</Dropdown.Item>
      <Dropdown.Item eventKey="2">Blue</Dropdown.Item>
      <Dropdown.Item eventKey="3" active>
        Orange
      </Dropdown.Item>
      <Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>,
);

文档

Answer 2

您可以轻松地将图标添加到react-bootstrap的下拉按钮中。

<NavDropdown title="Dropdown" id="collasible-nav-dropdown">

将此代码更改为下面给出的代码：

<NavDropdown
    title={
        <span>
            <i className='fad fa-newspaper'></i> Dropdown
        </span>
    }
    id='collasible-nav-dropdown'>

现在您的代码将如下所示。

<NavDropdown
    title={
        <span>
            <i className='fad fa-newspaper'></i> Dropdown
        </span>
    }
    id='collasible-nav-dropdown'>
    <NavDropdown.Item href='#action/3.1'>Action 1</NavDropdown.Item>
    <NavDropdown.Item href='#action/3.3'>Action 2</NavDropdown.Item>
</NavDropdown>

注意：我分享的代码取自react-bootstrap版本2.0.0。 https://react-bootstrap.github.io/components/navbar/