React-Bootstrap自定义Popover配合OverlayTrigger定位失效问题

定位失效是两个常见错误导致的：

• 自定义MyPopover组件用React.forwardRef包裹时，只接收了ref参数，没有把OverlayTrigger自动注入的定位相关属性（包括Popper生成的定位内联样式、箭头配置、实际弹出位置状态等）透传给内部的<Popover>组件，底层Popover拿不到定位参数，就会默认渲染到页面左上角坐标(0,0)位置。
• 多余给<OverlayTrigger>传了target属性，而且绑定的是Popover的ref，完全指向了错误的元素。OverlayTrigger默认会自动把触发引用绑定到它包裹的子元素（也就是代码里的{children}），不需要手动指定target。

1. 自定义Popover正确绑定触发元素的实现方式 #

只需要做两处修改即可：

• 自定义forwardRef组件接收props参数，将所有props全量透传给内部的Popover组件
• 删除OverlayTrigger上多余的target属性，不需要手动给触发元素绑定ref
  修正后的可运行代码：

import { Popover, OverlayTrigger, Form } from 'react-bootstrap'
import { forwardRef } from 'react'

// 自定义Popover必须透传所有props和ref
const MyPopover = forwardRef((props, ref) => {
    return (
        <Popover ref={ref} placement="bottom" {...props}>
            <Popover.Header as="h3">
                <Form.Control />
            </Popover.Header>
            <Popover.Body>
                <strong>Holy guacamole!</strong> Check this info.
            </Popover.Body>
        </Popover>
    )
})

const PopoverChooser = ({ children, container }) => {
    return (
        <>
            <OverlayTrigger
                trigger="click"
                placement="bottom"
                overlay={<MyPopover />}
            >
                {children} 
            </OverlayTrigger>
        </>
    )
}

export default PopoverChooser;

注意：如果传入的{children}是自定义React组件而非原生DOM节点、React-Bootstrap原生组件，需要给自定义组件也用forwardRef包裹，把ref透传到内部实际可点击的DOM节点上，否则OverlayTrigger拿不到触发元素的DOM引用，还是会出现定位异常。

2. 不需要手动计算坐标 #

React-Bootstrap的弹出层底层已经集成了Popper.js做自动定位，会自动处理页面滚动、窗口大小变化、视口边界检测自动翻转弹出位置等逻辑，只要属性透传正确，不需要自己获取按钮ID、手动计算偏移量。手动计算坐标会碰到非常多适配边界问题，完全属于重复造轮子。

3. 其他更简洁的实现思路 #

如果只是复用Popover的固定内容，不需要抽成带独立逻辑的组件，直接把Popover节点定义后传入overlay属性即可，能避免forwardRef透传带来的问题：

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

const PopoverChooser = ({ children }) => {
    const popoverContent = (
        <Popover placement="bottom">
            <Popover.Header as="h3">
                <Form.Control />
            </Popover.Header>
            <Popover.Body>
                <strong>Holy guacamole!</strong> Check this info.
            </Popover.Body>
        </Popover>
    )
    return (
        <OverlayTrigger trigger="click" placement="bottom" overlay={popoverContent}>
            {children}
        </OverlayTrigger>
    )
}

export default PopoverChooser

如果需要更灵活的控制（比如点击Popover内部按钮关闭弹出层、根据业务逻辑手动控制显示时机），可以不用OverlayTrigger，直接用<Overlay>组件配合useState控制显示状态，手动给target传入触发元素的ref即可，灵活度更高。

内容的提问来源于stack exchange，提问作者briiC