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

Question

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() 在每个渲染器上，none 都有效。对于 props.refreshImages 我实际上使用的是 Redux。

在此先感谢您的帮助。

Answer 1

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

假设您正在使用带钩子的功能组件，您可以使用 useEffect 钩子

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

或者使用 class 组件，您可以在 componentDidUpdate

中编写逻辑

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

Sample demo

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

React-tooltip doesn't show on conditional render

javascript

reactjs

react-redux

react-tooltip