Всплывающая подсказка не отображается при условном рендеринге

Question

react-tooltip - это круто, но у меня возникают проблемы с условно визуализированным компонентом.

У меня есть значок refre sh, который отображается только тогда, когда props.refreshImages true:

Верхняя панель. js

import React from 'react'

export default function Topbar (props) {
  return (
    <div>
      {props.refreshImages && 
      <i data-tip="Refresh the images" className="fas fa-sync-alt" ></i>}
    </div>
  )
}

Приложение js

import React from 'react'
import Topbar from './Topbar'
import ReactTooltip from 'react-tooltip'

export default function App() {
  return (
    <ReactTooltip />
    <Topbar refreshImages={true}/>
  )
}

Упрощенный пример. Но когда значок refre sh скрывается и отображается снова (props.refreshImages - false, а затем true), всплывающие подсказки не отображаются.

Я уже пробовал переместить <ReactTooltip /> в Topbar. js и работает ReactTooltip.rebuild () на каждом рендере, ни один из них не работал. Для props.refreshImages я использую Redux.

Заранее спасибо за помощь.

Answer 1

Вам нужно перестроить всплывающие подсказки с помощью ReactTooltip.rebuild, разместите рендер, а не перед ним.

Предполагая, что вы используете функциональные компоненты с хуками, вы можете сделать это с хуками useEffect

export default function App(props) {
  useEffect(() => {
      ReactTooltip.rebuild();
  }, [props.refreshImages])
  return (
    <ReactTooltip />
    <Topbar refreshImages={props.refreshImages}/>
  )
}

или с компонентом класса вы должны написать logi c in componentDidUpdate

 componentDidUpdate(prevProps) {
    if(prevProps.showItem !== this.props.showItem) {
      ReactTooltip.rebuild();
    }
  }

Пример демонстрации