反应工具提示在条件渲染时不显示

Question

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

我有一个刷新图标，仅在trueprops.refreshImages时显示：

顶栏.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.refreshImagesfalse然后true(时，工具提示不会显示。

我已经尝试将<ReactTooltip />移动到Topbar 中.js并在每次渲染上运行ReactTooltip.rebuild((，但没有一个有效。对于props.refreshImages，我实际上正在使用Redux。

提前感谢您的帮助。

Answer 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();
}
}

示例演示

Answer 2

ReactTooltip.rebuild((;

在组件中添加此函数，每当状态更新时，函数将调用并重建工具提示