显示时更改 react-bootstrap OverlayTrigger Popover 的内容

Question

我将 react-boostrap 的 Popover 与 OverlayTrigger 类一起使用。我的问题是，当我在显示时更改 Popover 上的内容时，它的大小已正确调整，但位置错误。即使不再与 OverlayTrigger 对齐，popover 也会保持其左上角位置

这就是我要说的：

这是我在渲染函数中使用的代码，非常简单：

const popover = (
        <Popover id={this.props.htKey} >
            {this.state.content}
        </Popover>
);

return (
            <OverlayTrigger
                trigger={["hover", "focus"]}
                delayShow={200}
                placement="top"
                overlay={popover}
                onEntered={this.startExtendTimer}
                onExited={this.resetContent}
            >
                <span>test</span>
            </OverlayTrigger>


 );

startExtenTimer 调用超时，在几秒钟后更改 this.state.content（因此导致我在图片上显示的问题）

如何在保持正确对齐的同时更改弹出框的内容？

Answer 1

我在这里找到了解决方案：

类似问题：https://github.com/react-bootstrap/react-bootstrap/issues/1438

回答：https://github.com/react-bootstrap/react-overlays/pull/42

您基本上可以将 shouldUpdatePosition 道具添加到 Overlay 组件。

<Overlay ... shouldUpdatePosition={true}  >

我目前的问题是在重新定位之前我有一个丑陋的延迟。我正在研究它，如果找到解决方案会更新

更新：为了消除这种延迟，我只需要在所述叠加内容更新时立即重新渲染包含叠加的组件。