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

我正在使用react-boostrap的Popover和OverlayTrigger类。我的问题是，当我在显示Popover时更改内容时，它会适当调整大小，但位置会出错。该酥料饼的保持，即使它不与OverlayTrigger在显示时更改react-bootstrap 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超时（theref矿石导致我在图片上显示的问题）

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

来源

2017-03-13 Ryan Pergent

发表了一些代码... – pmirnd

我添加了一些代码，但我认为它没有帮助，它是一个非常基本的脚本。 –

react-bootstrap计算组件安装时的位置。您将不得不以某种方式触发重新计算。看看内部代码是如何工作的（react-bootstrap.js：15222） – Chris

我发现这里的解决方案：

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

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

基本上你可以添加一个shouldUpdatePosition道具到覆盖组件。

<Overlay ... shouldUpdatePosition={true} >

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

更新：要删除此延迟，我只是不得不立即重新呈现组件时，覆盖内容更新时，保持覆盖。

来源

2017-03-31 10:29:30

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

回答

相关问题