从原理上看antd中getPopupContainer'失效'的问题

2020年03月02日Web前端0

在antd中，一般用到Select、Popover等组件时，getPopupContainer属性都会用到，他是用来表示浮层渲染的位置。

问题

在实际项目中使用时，发现在有竖直滚动条的时候，依旧会导致选择内容框与选择输入框“脱节”。因为增加了getPopupContainer树形，新生成的内容选择框应该在dom内，且做了相对的定位，应该是跟着滚动条走才对，但实际并不是这样。

查了下也没找到好的处理方式，只能看下他是怎么实现的了。

原理

getPopupContainer表示渲染的挂载点，默认为body。

他的最终实现在rc-trigger中，打开其index.js文件，在this.getContainer方法中，创建了一个div，设置其position为absolute，left和top为0，并将宽度设置为100%。最后根据渲染元素是谁，再appendChild。

var props = _this4.props;

var popupContainer = document.createElement('div');
popupContainer.style.position = 'absolute';
popupContainer.style.top = '0';
popupContainer.style.left = '0';
popupContainer.style.width = '100%';
var mountNode = props.getPopupContainer ? props.getPopupContainer((0, _reactDom.findDOMNode)(_this4)) : props.getDocument().body;
mountNode.appendChild(popupContainer);
return popupContainer;

所以实际上getPopupContainer原理就是将内容放在一个absolute的元素中，插入到getPopupContainer元素中。

处理方法

所以，为了getPopupContainer后的元素能够跟着滚动内容滚动，我们需要在scroll元素内层的元素设置相对层就行了。

antd

目录