ReactforwardRef 似乎不适用于 bootstrap Overlay

根据React-Bootstrap 覆盖文档 https://react-bootstrap.github.io/components/overlays/，覆盖的目标应该是the element the overlay is positioned in relation to如果目标是内联的，那么效果会很好。如那个实施例1 below.

然而，如果引用的 dom 项包含在另一个组件内，如图所示实施例2那么参考设置不正确，并且弹出框未正确定位。

我一开始并没有转发裁判，并认为这是我的问题，但即使在根据React.forwardRef 文档 https://reactjs.org/docs/react-api.html#reactforwardref，ref 仍然无法正常工作。

可能的解决方案：我可以放置我的目标倾斜度而不是另一个组件，但这消除了能够在 React 中使用组件的目的。

我可能在这个设置中的某个地方错过了一个小步骤，我只是不知道在哪里。

当我写下这篇文章并寻找重复项时，我确实找到了一个替代的工作解决方案。正如所见西蒙·阿瑟诺的回答 https://stackoverflow.com/a/60422359/1707323通过将组件包装在 dom 元素中，我可以使用该 dom 元素作为 ref，如下所示实施例3

我仍然想知道为什么forwardRef 似乎不起作用。

示例1： Working

...
export default (props) => {
  const [show, setShow] = useState(false)
  const target = useRef(null)
  ...
  return (
    <div>
      <p ref={target} >Click Me</p>
      <Overlay show={show} target={target.current} >
        <Popover id='123'>
          ...
        </Popover>
      </Overlay>
    </div>
  )
}

示例2：不工作

...
export default (props) => {
  const [show, setShow] = useState(false)
  const target = useRef(null)
  ...
  return (
    <div>
      <LinkIcon ref={target} />
      <Overlay show={show} target={target.current} >
        <Popover id='123'>
          ...
        </Popover>
      </Overlay>
    </div>
  )
}

...
const LinkIcon = React.forwardRef((props, ref) => {
  ...
  return (
    <div ref={ref}>
      ...
    </div>
  )
})

示例3： Working

...
export default (props) => {
  const [show, setShow] = useState(false)
  const target = useRef(null)
  ...
  return (
    <div>
      <div ref={target}><LinkIcon /></div>
      <Overlay show={show} target={target.current} >
        <Popover id='123'>
          ...
        </Popover>
      </Overlay>
    </div>
  )
}

...
const LinkIcon = React.forwardRef((props, ref) => {
  ...
  return (
    <div ref={ref}>
      ...
    </div>
  )
})

P.S.：是的，我知道这不是一个完全有效的示例，因为我不使用 Overlayshow属性，但它工作正常，为了简洁起见，省略了此代码片段。