React Bootstrap Popover：初始化时预打开 Popover

Question

如何预打开（初始化为打开）React Bootstrap 弹出窗口？我有以下在初始关闭状态下工作的，

const popoverApproverNewAgreement = (
    <Popover id="popover-approverNewAgreement">
        <Popover.Title as="h3"></Popover.Title>
        <Popover.Content>
        Some text
        </Popover.Content>
    </Popover>
);

<OverlayTrigger trigger="click" rootClose placement="bottom" overlay={popoverApproverNewAgreement}>
    <a href="javascript:void(0)" className="more-info">
        <i className="fas fa-question-circle" aria-label="more information">
        </i>
    </a>
</OverlayTrigger>

Answer 1

我无法让它与 OverlayTrigger 一起工作，但在更通用的 Overlay 上成功了，它需要一个 show={..} 这样你就可以 show/hide 有一个状态变量。

Overlay 需要如下 target ref。

// Ref for Link or Button triggering overlay (required for <Overlay> usage)
const refLink = useRef(null); 

// State variable
const [overlayOpen, setOverlayOpen]  = useState(true); // Initially open

<a ref={refLink} href="javascript:void(0)" onClick={() => setOverlayOpen(!overlayOpen)}>
    <i className="fas fa-question-circle" aria-label="more information">
    </i>
</a>
<Overlay target={refLink.current} show={overlayOpen} 
         onHide={() => setOverlayOpen(false)} rootClose placement="bottom">
    {popoverApprover}
</Overlay>

Answer 2

我一直在寻找同样的问题，我发现 OverlayTrigger 有一个名为 defaultShow 的属性（如果你想要默认行为）和一个 show 属性（你可以使用例如，通过使用 useState 定义的变量来操作组件）。你可以在这里找到它： https://react-bootstrap.github.io/components/overlays/

编辑

接受的答案非常有效。但是您将不得不重新编写一些 OverlayTrigger 提供的 ready-to-use 代码 - 例如，如果您使用的是 OverlayTrigger，那么动态处理更新位置真的很容易。

React Bootstrap Popover：初始化时预打开 Popover

React Bootstrap Popover: Pre-Open Popover on initialization

reactjs

react-bootstrap