Question

根据React-Bootstrap Overlays docs，叠加层的目标应为the element the overlay is positioned in relation to，如果目标为内联，则效果很好。例如下面的示例1 。

但是，如果引用的dom项目包含在另一个组件的内部（如示例2 所示），则引用的设置不正确，弹出窗口的位置也不正确。

我一开始并没有转发参考文件，并认为这是我的问题，但是即使按照React.forwardRef docs进行了修复，参考文件仍然无法正常工作。

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

在此设置中，我可能缺少一小步，我只是不知道在哪里。

我在写这篇文章并寻找重复项目时确实找到了替代的工作解决方案。如Simon Arsenault's Answer所示，通过将组件包装在dom元素中，我可以使用dom元素作为ref，如示例3

所示

我仍然想知道为什么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属性，但是它可以正常工作，为简洁起见，在此代码段中没有

React forwardRef似乎不适用于bootstrap Overlay

0 个答案: