reactjs - 显示时更改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}  >

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

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