时间戳

首页 > 解决方案 > React-tooltip 不显示在条件渲染上

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

问题描述

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.refreshImagesisfalse和 then true）时，工具提示不会显示。

我已经尝试<ReactTooltip />进入Topbar.js并在每次渲染时运行ReactTooltip.rebuild()，但都没有奏效。因为props.refreshImages我实际上正在使用 Redux。

在此先感谢您的帮助。

标签： javascriptreactjsreact-reduxreact-tooltip

解决方案

您需要使用 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();
    }
  }

示例演示

推荐阅读