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

Question

我正在使用带有 OverlayTrigger 的 react-boostrap 的 Popover class。我的问题是，当我在显示时更改 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}  >

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

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

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

Change react-bootstrap OverlayTrigger Popover's content while displayed

reactjs

bootstrap-popover

react-bootstrap