反応ブートストラップの変更OverlayTrigger表示中のPopoverのコンテンツ

Question

私は、反応ブーストラップのPopoverをOverlayTriggerクラスと併用しています。私の問題は、Popoverが表示されている間に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を変更するタイムアウト（therefを呼び出しますどのように私は正しい整列を維持しながらポップオーバーの内容を変更することができますか？

Answer 1

私はここで解決策を見つけた：

同様の質問：https://github.com/react-bootstrap/react-bootstrap/issues/1438

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

をあなたは基本的にオーバーレイコンポーネントにshouldUpdatePosition小道具を追加することができます。

<Overlay ... shouldUpdatePosition={true} > 

私の現在の問題は、再配置の前に醜い遅延があることです。私はそれを調べて、解決策が見つかったら更新します。

更新：この遅延を取り除くために、上記のオーバーレイコンテンツが更新されたときに、オーバーレイを保持するコンポーネントをただちに再レンダリングするだけでした。