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（），但没有一个工作。对于props.refreshImages，我实际上正在使用Redux。

预先感谢您的帮助。

Answer 1

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

假设您正在使用带有挂钩的功能组件，则可以使用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

react-tooltip在条件渲染中不显示

1 个答案: