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

Question

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

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

Answer 1

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

let p = createElement('p');
document.body.appendChild(p);
ReactDOM.render(<Modal />, p);

Answer 2

@ssruoyan
你这么写用ES6语法如何实现？

Answer 3

modal是否可见根据他的visible判断，这是今天写的一个移动端的代码。不太清楚你说的什么意思

Answer 4

实际上就是脱离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里的用法

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

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