2

根据React-Bootstrap Overlays 文档，如果目标是内联的，则覆盖的目标应该是the element the overlay is positioned in relation to可以很好地工作的。例如下面的示例 1。

但是，如果引用的 dom 项目包含在另一个组件中，如示例 2所示，则引用设置不正确，并且弹出框没有正确定位。

起初我没有转发 ref，并认为这是我的问题，但即使根据React.forwardRef 文档修复了该问题， ref 仍然无法正常工作。

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

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

当我写这个并寻找重复项时，我确实找到了一个替代的工作解决方案。正如Simon Arsenault 的回答中所见，通过将组件包装在 dom 元素中，我可以使用该 dom 元素作为示例 3中所示的 ref

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

示例 1：工作

...
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：工作

...
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>
  )
})

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

4

0 回答 0