`popover'（作为react组件）用`

Question

我正在尝试将丰富的React组件作为弹出内容创建。 如果我将示例与简单 const popover （）一切正常。

问题，

但是自定义反应组件无法定位。它出现在屏幕的左上角

const MyPopover = React.forwardRef((props, ref) => {
    return <Popover ref={ref} placement={"bottom"}>
        <Popover.Header as="h3">
            <Form.Control></Form.Control>
        </Popover.Header>
        <Popover.Body>
            <strong>Holy guacamole!</strong> Check this info.
        </Popover.Body>
    </Popover>
})

const PopoverChooser = ({children,  container}) => {
    const _refTarget = useRef(null)

    return <>
          <OverlayTrigger
              trigger="click"
              placement="bottom"
              overlay={<MyPopover ref={_refTarget}/>}
              target={_refTarget.current}
          >
              {children} 
          </OverlayTrigger>
    </>
}
export default PopoverChooser;

如您所见，我尝试使用 ref 's，但这无济于事。

问题

1. 如何将弹出键链链接到目标按钮（如下拉按钮中的图像中，在代码中为 {children {children} ）。
2. 还是我应该手动定位 mypopover （通过检查按钮ID并分配位置等。等等？）
3. 完全不同的方法来挖掘..？

Answer 1

您转发裁判的方法是正确的。您实际忘记的是注入道具。根据文档：

组件和组件不会定位自己。
相反（或）组件，注入ref和
样式道具。

httpps://react-bootstrap.netlify.app/components/components/poverlays/poverlays/poverlays/poverlays/poverview <<<<<<<<<<<<<<<< /a>

因此，您需要做的是传播这样的道具：

const MyPopover = React.forwardRef((props, ref) => {
  return (
    <Popover ref={ref} {...props}>

https：// codesandbox box .io/s/s/trusting-sid-0050g9