React antd框架下如何让Popover精准对齐鼠标点击位置而非容器顶部中间

你现在的问题根源是Popover默认以包裹的全屏div作为锚点，所以会对齐容器的中点，要改成对齐鼠标点击位置，按下面调整即可： #

核心实现思路 #

放弃以全屏div作为Popover的锚点元素，改为监听点击事件获取鼠标坐标，动态控制Popover的弹出位置 #

具体修改步骤 #

1. 扩展state存储点击坐标

// 在原有state中新增两个字段存储点击位置
state = {
  visible: false,
  clickX: 0,
  clickY: 0,
  // 保留你原有的其他state字段
}

2. 修改点击事件获取坐标

onHandleClick = (e) => {
  e.stopPropagation();
  this.setState({
    visible: true,
    // 拿到鼠标点击的视口坐标
    clickX: e.clientX,
    clickY: e.clientY
  })
}

3. 调整JSX结构
   不要把大div套在Popover内部，将Popover移到外层，用空元素作为虚拟锚点配合动态样式控制位置：

{/* 原有的可编辑div */}
<div
  className="example-div"
  id={exampleId}
  contentEditable="true"
  dangerouslySetInnerHTML={{ __html: styledExample }}
  onClick={this.onHandleClick}
/>

{/* 独立的Popover组件 */}
<Popover 
  visible={visible}
  content={content} 
  overlayInnerStyle={{ borderRadius: "8px", textAlign: "center" }} 
  placement="top"
  {/* 偏移量可根据你的UI样式自行调整，让箭头精准对准点击位置 */}
  align={{ offset: [0, -8] }}
  overlayStyle={{
    position: 'fixed',
    left: `${this.state.clickX}px`,
    top: `${this.state.clickY}px`,
  }}
  {/* 按需添加点击外部关闭逻辑 */}
  onVisibleChange={(visible) => this.setState({visible})}
>
  {/* 虚拟锚点元素，和点击坐标位置对齐 */}
  <span style={{position: 'fixed', left: this.state.clickX, top: this.state.clickY}} />
</Popover>

补充说明 #

• 如果需要点击页面其他区域自动关闭Popover，可以给document绑定全局click事件，触发时把visible设为false即可，注意和div的点击事件冒泡逻辑做好兼容
• 如果你使用的不是Ant Design的Popover组件，其他组件库的弹窗组件基本都支持自定义样式和定位属性，上述思路通用
• 如果不想用fixed定位，换成absolute定位的话，需要将getPopupContainer设置为和父级容器相同的定位上下文即可

内容的提问来源于stack exchange，提问作者abinas patra