Как динамически перенастроить позиционирование Bootstrap Overlay / Popover в React?
Я пытаюсь скорректировать расположение оверлея, содержащего всплывающее окно, содержимое которого изменяется динамически. В настоящее время содержимое всплывающего окна обновляется, но положение всплывающего окна не меняется. Это приводит к тому, что обновленное Popover находится в неправильном положении (вроде как плавает там).
Первое состояние с корректным отображением контента.
После обновлений содержимого Popover.
Вот мой код:
<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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В итоге я решил свой вопрос. Надеюсь, это кому-то поможет. Я исправил проблему с позиционированием, заставив React повторно визуализировать компонент Overlay.
Этот ответ заслуживает всяческих похвал.
Все, что я сделал, - это добавил ключ случайного значения в Overlay и обновил ключ при изменении содержимого.
Оверлей:
<Overlay key = {this.state.overlayKey} ... > ... </Overlay>
В функции, в которой изменяется содержимое оверлея:
this.setState({ key: Math.random() });