隐藏函数不是 OverlayTrigger 上的公共函数。设置<OverlayTrigger rootClose={true}...然后在您的onClick事件触发器上调用document.body.click()。

向<OverlayTrigger ref="overlay"...元素添加 ref 并在元素hide呈现后调用该方法。还没有测试过，但应该可以工作：

this.refs.overlay.hide();

如果有人正在寻找没有“关闭”按钮的解决方案，而是 -> 在第二次单击时关闭它，它是：

    <OverlayTrigger trigger="focus" placement="top" overlay={popover}>
        <a tabindex="0">Some text</a>
    </OverlayTrigger>

我用以下代码解决了这个问题：

import React from "react";
import ReactDOM from "react-dom";
import {
  Container,
  Popover,
  OverlayTrigger,
  Button,
  Row,
  Col
} from "react-bootstrap";

// Styles
import "bootstrap/dist/css/bootstrap.css";

const PopoverCustom = () => {
  let ref = React.useRef(null);

  const popover = (
    <Popover id="popover-basic">
      {/* <Popover.Title as="h3">Popover right</Popover.Title> */}
      <Popover.Content>
        And here's some <strong>amazing</strong> content. It's very engaging.
        right?
        <div className="mt-3 mb-1">
          <Button
            onClick={() => ref.handleHide()}
            size="sm"
            variant="outline-dark"
            className="pt-0 pb-0"
          >
            Hide Popover
          </Button>
        </div>
      </Popover.Content>
    </Popover>
  );

  return (
    <OverlayTrigger
      ref={r => (ref = r)}
      container={ref.current}
      trigger="click"
      placement="auto"
      overlay={popover}
      rootClose
    >
      <Button variant="dark">Show popover</Button>
    </OverlayTrigger>
  );
};

function App() {
  return (
    <Container className="ml-5 mt-5">
      <Row>
        <Col className="offset-sm-2" sm={8}>
          <PopoverCustom />
        </Col>
      </Row>
    </Container>
  );
}

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