如何在初始化时预打开React Bootstrap Popover？

要实现Popover在组件初始化时就处于打开状态，你可以通过两种方式来实现，根据你的需求选择即可：

方案一：使用OverlayTrigger的defaultShow属性（简单直接） #

React Bootstrap的OverlayTrigger组件提供了defaultShow属性，设置为true就能让Popover在组件挂载时默认显示，同时保留原有的点击切换、点击外部关闭的行为。只需要给你的OverlayTrigger加上这个属性就行：

import { Popover, OverlayTrigger } from 'react-bootstrap';

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

  return (
    <OverlayTrigger
      trigger="click"
      rootClose
      placement="bottom"
      overlay={popoverApproverNewAgreement}
      defaultShow={true} {/* 新增这个属性，实现默认打开 */}
    >
      <a href="javascript:void(0)" className="more-info">
        <i className="fas fa-question-circle" aria-label="more information"></i>
      </a>
    </OverlayTrigger>
  );
};

export default YourComponent;

方案二：手动控制显示状态（适合动态场景） #

如果你需要后续通过其他逻辑动态控制Popover的显示/隐藏，推荐使用Overlay组件配合React状态来实现。这种方式灵活性更高：

import { useState, useRef } from 'react';
import { Popover, Overlay } from 'react-bootstrap';

const YourComponent = () => {
  // 初始状态设为true，让Popover默认打开
  const [showPopover, setShowPopover] = useState(true);
  // 绑定触发元素的ref，让Overlay知道要附着在哪个元素上
  const targetRef = useRef(null);

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

  return (
    <div>
      <a
        ref={targetRef}
        href="javascript:void(0)"
        className="more-info"
        onClick={() => setShowPopover(!showPopover)} {/* 点击切换显示状态 */}
      >
        <i className="fas fa-question-circle" aria-label="more information"></i>
      </a>
      <Overlay
        show={showPopover} {/* 绑定状态控制显示 */}
        target={targetRef.current}
        placement="bottom"
        rootClose {/* 点击外部关闭 */}
        onHide={() => setShowPopover(false)} {/* 关闭时更新状态 */}
      >
        {popoverApproverNewAgreement}
      </Overlay>
    </div>
  );
};

export default YourComponent;

两种方案都能满足你的需求，方案一适合只需要默认打开的简单场景，方案二更适合需要动态控制的复杂场景。

内容的提问来源于stack exchange，提问作者gene b.