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

Question

react-tooltip 很棒，但是我遇到了条件渲染组件的问题。
我有一个刷新图标，仅在 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}/>
  )
}

简化示例。但是当刷新图标被隐藏并再次显示时( props.refreshImages 是 false 然后是 true )工具提示不会显示。
我已经尝试过移动 <ReactTooltip />进入 Topbar.js 并在每次渲染上运行 ReactTooltip.rebuild() ，没有一个工作。对于 props.refreshImages我实际上正在使用 Redux。
在此先感谢您的帮助。

Answer 1

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

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

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