在顯示時更改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的內容

回答

相關問題