使用三点跨度触发 DropDown

Question

我正在使用 react-bootstrap，并且有一个带有插入符号的按钮，可以触发下拉列表。

但是我需要使用垂直的 3 个点，而不是按钮样式。

我有一个对三个点使用 CSS 类的跨度，但似乎无法找到摆脱按钮和插入符号的方法。

我现在最紧张的是：

<Dropdown>
    <Dropdown.Toggle>
      <span className="threedots"></span>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

我只想看到三个点（我将添加鼠标悬停效果）。有没有办法使用快照作为切换>

Answer 1

您可以通过传入自定义子组件来自定义 Dropdown。自定义下拉组件

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {/* custom icon */}
    {children}

  </a>
));

然后作为自定义切换传递

<Dropdown >
    <Dropdown.Toggle as={CustomToggle}>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

示例代码和框，希望有帮助