84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
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里的用法
签名和定义可以见这里,上面有注释
其实我也没完全理解这个接口的用法...不保证正确,题主还是自己看上面连接里的代码吧
去看Modal实现的源码,很好看懂。简单来说就是:
@ssruoyan
![](http://img.php.cn/upload/image/000/000/000/f81fdc004043d020a753a115fd3f2c94-0.png)
你这么写用ES6语法如何实现?
modal是否可见根据他的visible判断,这是今天写的一个移动端的代码。不太清楚你说的什么意思
实际上就是脱离react作用域渲染并使用一个组件
这个涉及到ReactDOM.unstable_renderSubtreeIntoContainer这个接口,
但是这个接口文档上是没有的,并且被标注了unstable
它的签名是这样的
大概可以这样用
具体用法可以参考一下react-portal里的用法
或者蚂蚁金服ant design里的用法
签名和定义可以见这里,上面有注释
其实我也没完全理解这个接口的用法...不保证正确,题主还是自己看上面连接里的代码吧