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

Question

我正在使用react-boost的Popover和OverlayTrigger类。我的问题是，当我在显示时更改Popover上的内容时，它会被正确调整大小但位置会出错。弹出窗口保持其左上角位置，即使它不再与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

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

<Overlay ... shouldUpdatePosition={true}  >

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

更新：要删除此延迟，我只需在所述叠加内容更新时立即重新呈现包含叠加层的组件。