antd 中 Tooltip 和 Popover 组件第一次打开位置错位，第二次正常

撒库拉-琳琳

于 2020-10-15 11:26:14 发布

阅读量6.6k

点赞数 4

分类专栏： react 前端文章标签： reactjs es6

本文链接：https://blog.csdn.net/weixin_45190306/article/details/109093908

版权

前端同时被 2 个专栏收录

23 篇文章

订阅专栏

react

20 篇文章

订阅专栏

博客记录了在antd库中遇到的Tooltip和Popover组件首次打开位置错位的问题，问题表现为当设置触发方式为click时，第一次打开位置不正确，但第二次打开即恢复正常。解决方案是在Popover组件中添加forceRender属性并设置为true，这能确保组件在初次渲染时就正确计算位置。此方法避免了对content内容设置固定宽高的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd 中 Tooltip 和 Popover 组件第一次打开位置错位，第二次正常的问题记录：设置点击事件trigger=“click”，第一次打开是偏下，第二次再次点击即正常，https://ant.design/components/popover-cn/官网也没有显示，网上很多是说将content的内容限制好宽高，这在实际项目中是不可能的，不是每个的弹出框大小都可以固定的。

可以进行设置：forceRender={true}

<Popover
                placement="left"
                trigger="click"
                forceRender={true} //重点设置
                content={<你自己的组件  />}
              >
</Popover>