扫码关注官方订阅号
84669人学习
65727人学习
82984人学习
467778人学习
498837人学习
471966人学习
256484人学习
152542人学习
224170人学习
139536人学习
81804人学习
85022人学习
11944人学习
20001人学习
60816人学习
5487人学习
15007人学习
2150人学习
6980人学习
194925人学习
359900人学习
1142人学习
19058人学习
3206人学习
180550人学习
48569人学习
17603人学习
40936人学习
1049人学习
750人学习
32909人学习
想用react写一个公用的弹窗模块,类似蚂蚁金服种的react Modal方法。
我不知道这个实现的原理是什么?怎么才能把我写的弹窗插入到页面最后去呢?
光阴似箭催人老,日月如移越少年。
去看Modal实现的源码,很好看懂。简单来说就是:
let p = createElement('p'); document.body.appendChild(p); ReactDOM.render(<Modal />, p);
@ssruoyan 你这么写用ES6语法如何实现?
modal是否可见根据他的visible判断,这是今天写的一个移动端的代码。不太清楚你说的什么意思
实际上就是脱离react作用域渲染并使用一个组件
这个涉及到ReactDOM.unstable_renderSubtreeIntoContainer这个接口, 但是这个接口文档上是没有的,并且被标注了unstable
它的签名是这样的
function( parentComponent, nextElement, container, callback, )
大概可以这样用
componentDidMount() { const container = document.createElement('p'); document.body.appendChild(container); ReactDOM.unstable_renderSubtreeIntoContainer( this, (<Modal />), container, function () { /* callback */ } ) }
具体用法可以参考一下react-portal里的用法或者蚂蚁金服ant design里的用法
签名和定义可以见这里,上面有注释
其实我也没完全理解这个接口的用法...不保证正确,题主还是自己看上面连接里的代码吧
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
精品班
技术支持
技术咨询
学习群
会员优惠
返回顶部
去看Modal实现的源码,很好看懂。简单来说就是:
@ssruoyan
你这么写用ES6语法如何实现?
modal是否可见根据他的visible判断,这是今天写的一个移动端的代码。不太清楚你说的什么意思
实际上就是脱离react作用域渲染并使用一个组件
这个涉及到ReactDOM.unstable_renderSubtreeIntoContainer这个接口,
但是这个接口文档上是没有的,并且被标注了unstable
它的签名是这样的
大概可以这样用
具体用法可以参考一下react-portal里的用法
或者蚂蚁金服ant design里的用法
签名和定义可以见这里,上面有注释
其实我也没完全理解这个接口的用法...不保证正确,题主还是自己看上面连接里的代码吧