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

【问题标题】：How to readjust positioning of Bootstrap Overlay/Popover in React dynamically?如何在 React 中动态调整 Bootstrap Overlay/Popover 的位置？
【发布时间】：2021-07-01 19:09:34
【问题描述】：

我正在尝试重新调整 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 属性添加到覆盖层，如前面问题中所述，但它没有解决任何问题。我也尝试过使用 OverlayTrigger 组件，但这也有同样的问题。

【问题讨论】：

标签： javascript reactjs overlay react-bootstrap popover

【解决方案1】：

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

This answer gets all the credit.

我所做的只是将随机值键添加到叠加层，并在内容更改时更新键。

叠加层：

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

在改变 Overlay 内容的函数中：

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

【讨论】：