博客

Antd中遍历循环多个Popover, getPopupContainer无效

<Popover
	content={
           <div className={styles.deletePop}>
	            <p>{trans('literacyEditor.deleteCommentTips', '您确定要删除该评语吗？')}</p>
	            <div className={styles.operation}>
	                 <span className={styles.cancel} onClick={() =>  this.changePopVisible(false, item.id)}>{trans("global.cancelText", '取消')}</span>
	                 <span className={styles.confirm} onClick={() => this.deleteComment(item.id)}>{trans('global.delete', '删除')}</span>
	           </div>
           </div>
         } 
    visible={this.state.popVisible[item.id] || false}
    onVisibleChange={(visible) => this.changePopVisible(visible, item.id)}
    trigger="click" 
    title={null} 
    placement="bottomRight" 
    getTooltipContainer={trigger => trigger.parentNode}
  >
    <i className={icon.iconfont}>&#xe797;</i> 
   </Popover>

因为这几个Popover是遍历循环的，最开始因为当前节点找不到父级节点，导致出现getTooltipContainer不生效，后面查看css原来是定位失效。

解决办法：

找到Popover最近的父级节点，添加position: relative; 完美解决这个问题~~