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

簽名和定義可以見這里，上面有注釋

其實我也沒完全理解這個接口的用法...不保證正確，題主還是自己看上面連接里的代碼吧