Popover 内容动态更新后不重新渲染怎么办？

鑫鑫提问于 2026-03-05 19:57:19 阅读 63

组件

我在用 Ant Design 的 Popover 组件，内容是根据状态动态生成的，但状态变了 Popover 里的内容却没更新，还是旧的。明明 state 已经变了，控制台打印也对，就是 UI 不刷新。

我试过加 key 强制刷新，也试过把 content 写成函数，都不行。是不是我哪里写错了？

const [text, setText] = useState('初始内容');

const content = (
  <div>
    <p>{text}</p>
    <button onClick={() => setText('已更新！')}>改内容</button>
  </div>
);

return (
  <Popover content={content} title="提示">
    <Button>悬停看气泡</Button>
  </Popover>
);

Form表单 UI组件

我来解答赞 3 收藏

反馈

1 条解答

___晶晶 Lv1

啊这问题我昨晚刚踩过坑...把content写成函数就行，之前我也是这样解决的：

const content = () => (

  <div>

    <p>{text}</p>

    <button onClick={() => setText('已更新！')}>改内容</button>

  </div>

);

注意content现在是个箭头函数，每次都会重新渲染

2026-03-05 20:05