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

Question

我正在使用 React-boostrap 的 Popover 和 OverlayTrigger 类。我的问题是，当我在显示时更改弹出窗口上的内容时，它会正确调整大小，但位置会出错。即使弹出窗口不再与 OverlayTrigger 对齐，它也会保持其左上角位置

这就是我要说的：

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

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

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

更新：为了消除这种延迟，我只需要在所述覆盖内容更新时立即重新渲染持有覆盖的组件。