如何动态调整Bootstrap Overlay/Popover在React中的定位？

Question

我正在尝试重新调整 Overlay 的位置，其中包含内容动态变化的 Popover。目前，Popover 内容会更新，但 Popover 的位置不会改变。这导致更新的 Popover 处于错误的位置（有点漂浮在那里）。

First state with content displaying correctly.

After content of Popover updates.

这是我的代码：

<Form.Group>
  <Form.Label>Listing URL</Form.Label>
  <Form.Control name="url" ref={this.urlInput} value={this.state.current_listing.listing.url} onChange={this.handleURL} placeholder="Enter URL"/>
  <Overlay target={this.urlInput.current} show={this.state.similar_listings.length > 0} placement="right">
    <Popover style={{width: "700px", maxWidth: "700px"}} key={seedrandom(this.state.current_listing.url)}>
      <Popover.Title as="h3">Similar Listings</Popover.Title>
      <Popover.Content>
        <ListingAccordion listings={this.state.similar_listings} callback={this.callback} mode="similar"/>
      </Popover.Content>
    </Popover>
  </Overlay>
</Form.Group>

我已经尝试将 shouldUpdatePosition 道具添加到前面的问题中提到的 Overlay，但它没有解决任何问题。我也尝试使用 OverlayTrigger 组件，但也有同样的问题。

Answer 1

我最终解决了我自己的问题。希望这对某人有帮助。我通过强制 React 重新渲染 Overlay 组件来解决定位问题。

我所做的只是将随机值密钥添加到覆盖层，并在内容发生变化时更新密钥。

覆盖：

<Overlay key={this.state.overlayKey} ... > ... </Overlay>

在更改 Overlay 内容的函数中：

this.setState({ key: Math.random() });

如何动态调整Bootstrap Overlay/Popover在React中的定位？

How to readjust positioning of Bootstrap Overlay/Popover in React dynamically?

javascript

reactjs

overlay

react-bootstrap

popover