javascript - 蚂蚁金服里的react Modal方法，是怎么把元素插入到页面最后的

问题描述

想用react写一个公用的弹窗模块，类似蚂蚁金服种的react Modal方法。

我不知道这个实现的原理是什么？怎么才能把我写的弹窗插入到页面最后去呢？

问题解答

去看Modal实现的源码，很好看懂。简单来说就是：

let p = createElement(’p’);document.body.appendChild(p);ReactDOM.render(<Modal />, p);回答2：

@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里的用法

签名和定义可以见这里，上面有注释

其实我也没完全理解这个接口的用法...不保证正确，题主还是自己看上面连接里的代码吧