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上面
  • 核心代码如下截图
    rc-dialog代码
    这里发现react 16和react 16以前的实现还有差异

1. ReactDOM.unstable_renderSubtreeIntoContainer

先看下react 16以前的实现,我们顺着依赖关系可以找到rc-util/lib/ContainerRender.js这个文件, 最好找到下面这个api, 我们可以看到一些这个方法的介绍。

ReactDOM.unstable_renderSubtreeIntoContainer

/**
 * renderSubtreeIntoContainer
 * Renders a React component into the
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值