react 中组件Modal, Dialog 怎么挂载到body上了的?
一些猜想
- 因为支持组件式写法 ,肯定是React中一些api,把modal,dialog的元素append到body里面的
function UserDefinedComponent {
return (
<div>
<Modal_or_Dialog {
...someProps}>
...一些react元素
</Modal_or_Dialog>
</div>
)
}
看antd modal的代码如何实现的
- 找了一会发现antd依赖rc-dialog 这个库,那我们就接着看rc-dialog这个库如何把元素放到body上面
- 核心代码如下截图
这里发现react 16和react 16以前的实现还有差异
1. ReactDOM.unstable_renderSubtreeIntoContainer
先看下react 16以前的实现,我们顺着依赖关系可以找到
rc-util/lib/ContainerRender.js这个文件, 最好找到下面这个api, 我们可以看到一些这个方法的介绍。
ReactDOM.unstable_renderSubtreeIntoContainer
/**
* renderSubtreeIntoContainer
* Renders a React component