Arco Design 的 Tooltip 为什么在动态内容下不更新？

司马诗诗提问于 2026-03-17 12:25:22 阅读 4

组件

我在用 Arco Design 的 Tooltip 组件，传入的 content 是一个状态变量，但当我更新这个状态时，Tooltip 里的文字没变，还是显示旧的内容。明明 state 已经变了啊！

我试过加 key 强制刷新，也试过把 content 写成函数形式，都不行。代码大概是这样：

const [text, setText] = useState('初始提示');
// ...
return (
  <Tooltip content={text}>
    <Button onClick={() => setText('新提示内容')}>点我更新</Button>
  </Tooltip>
);

我来解答赞 3 收藏

反馈

1 条解答

端木悦轩 Lv1

这个问题是因为 Arco Design 的 Tooltip 内部对 content 做了缓存优化，默认不会响应 props 的变化。

两个解决方法：

一是加上 updateOnHover 属性：

<Tooltip content={text} updateOnHover>

  <Button onClick={() => setText('新提示内容')}>点我更新</Button>

</Tooltip>

这样每次鼠标悬停时会重新读取 content 的值。

二是用 key 强制刷新组件：

<Tooltip content={text} key={text}>

  <Button onClick={() => setText('新提示内容')}>点我更新</Button>

</Tooltip>

text 变化时 key 跟着变，Tooltip 就会重新挂载。

第一种方式适合hover显示的场景，第二种适合需要立即更新的场景，看你具体需求选一个。

2026-03-17 22:04