React Bootstrap Popover Placement/不显示

Question

新的反应，我正在尝试使用弹出显示的照片，我是从Firebase存储检索。我可以让它显示，但只能在左上角。经过一些研究后，我发现我没有传递触发器覆盖的道具。执行此操作后，Image现在根本不会显示--尽管我可以从Popover组件中注销道具。

          <td>
        <OverlayTrigger
          trigger="click"
          placement="right"
          overlay={<PopoverComponent url={update.photoURL}/>}
        >
          <Button variant="success">Click to see bandage</Button>
        </OverlayTrigger>
      </td>

Popover组件代码

const PopoverComponent =(属性) => {

const [updateURL, setUpdateURL] = useState();
const {id, bandageID} = useParams();
storage.ref(`images/${id}/${bandageID}/updates/${props.url}`).getDownloadURL().then(url =>
        setUpdateURL(url))


        
return (
    <Popover {...props} id="popover-basic">
    <Popover.Title as="h3">Updated Bandage</Popover.Title>
        <Popover.Content>
        {console.log(props)}
            <Image src={updateURL} rounded/>
        </Popover.Content>
    </Popover>
);

}

export default PopoverComponent;

不知道我哪里出错了，有没有人可以帮忙？

谢谢

Answer 1

通过将popover组件包装在div标记中解决了这个问题！

<div><PopoverComponent url={update.photoURL}/></div>