React-tooltip 不显示在条件渲染上答案

【问题标题】：React-tooltip doesn't show on conditional renderReact-tooltip 不显示在条件渲染上
【发布时间】：2020-05-27 21:06:07
【问题描述】：

react-tooltip 很棒，但我遇到了条件渲染组件的问题。

我有一个刷新图标，它只在 props.refreshImages 是 true 时显示：

Topbar.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>
  )
}

App.js

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

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

简化示例。但是，当刷新图标被隐藏并再次显示时（props.refreshImages 是 false，然后是 true），工具提示不会显示。

我已经尝试将 <ReactTooltip /> 移动到 Topbar.js 并在每次渲染时运行 ReactTooltip.rebuild()，但都没有成功。对于props.refreshImages，我实际上是在使用 Redux。

提前感谢您的帮助。

【问题讨论】：

标签： javascript reactjs react-redux react-tooltip

【解决方案1】：

您需要使用 ReactTooltip 重建工具提示。rebuild 是在渲染后而不是在渲染之前。

假设您使用带有钩子的功能组件，您可以使用 useEffect 钩子来实现

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

或者使用类组件，您可以在 componentDidUpdate 中编写逻辑

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

Sample demo

【讨论】：