React Bootstrap：触发 Popover 似乎会破坏 Dropdown 组件答案

【问题标题】：React Bootstrap: triggering a Popover seems to break Dropdown componentsReact Bootstrap：触发 Popover 似乎会破坏 Dropdown 组件
【发布时间】：2020-11-06 14:29:23
【问题描述】：

我有一个父组件，它同时呈现 react-bootstrap Popover 和 DropdownButton，就像这样。

const OverlayTrigger = ReactBootstrap.OverlayTrigger;
const Popover = ReactBootstrap.Popover;
const DropdownButton = ReactBootstrap.DropdownButton;
const Dropdown = ReactBootstrap.Dropdown;

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div className="d-flex w-50 justify-content-around">
          <OverlayTrigger
            trigger="hover"
            placement="right"
            overlay={
              <Popover id="popover-basic">
                <Popover.Title as="h3">Popover</Popover.Title>
                <Popover.Content>My Popover</Popover.Content>
              </Popover>
            }
          >
            <Button>Hover Over Me First</Button>
          </OverlayTrigger>

          <DropdownButton title="Then, Click Me Second">
            <Dropdown.Item href="#/action-1">This</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Overlay</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Won't</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Apper</Dropdown.Item>
            <Dropdown.Item href="#/action-3">After</Dropdown.Item>
            <Dropdown.Item href="#/action-3">Clicking</Dropdown.Item>
            <Dropdown.Item href="#/action-3">Popover</Dropdown.Item>
          </DropdownButton>
        </div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

问题：一旦通过事件触发了弹出框，下拉菜单就不再起作用，即使在弹出框被解除后也是如此。我同时使用了 Dropdown 和 DropdownButton 组件，但问题仍然存在。我什至尝试将弹出框的触发事件更改为悬停，但也没有运气。

规格：

React-Bootstrap 1.4.0
React 和 ReactDOM 17.0.1
Twitter 引导程序 4.5.0

如果你想摆弄它，这里有一支笔来演示问题https://codepen.io/UntidyJoseph/pen/abZaZqe

关于我做错了什么有什么想法吗？

编辑：我还应该提到，这两个组件都直接来自 React-Bootstrap 文档，并且似乎完全有理由一起工作。

【问题讨论】：

标签： javascript reactjs create-react-app react-bootstrap popper.js

【解决方案1】：

将“react-overlays”更新到版本 >= 4.1.1 解决了这个问题。我只是将这个特定版本添加到我的 package.json 文件中，以避免通过依赖解析坚持旧的 2.x。

【讨论】：