問(wèn)題描述

想用react寫一個(gè)公用的彈窗模塊，類似螞蟻金服種的react Modal方法。

我不知道這個(gè)實(shí)現(xiàn)的原理是什么？怎么才能把我寫的彈窗插入到頁(yè)面最后去呢？

問(wèn)題解答

去看Modal實(shí)現(xiàn)的源碼，很好看懂。簡(jiǎn)單來(lái)說(shuō)就是：

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

@ssruoyan 你這么寫用ES6語(yǔ)法如何實(shí)現(xiàn)？

modal是否可見(jiàn)根據(jù)他的visible判斷，這是今天寫的一個(gè)移動(dòng)端的代碼。不太清楚你說(shuō)的什么意思

實(shí)際上就是脫離react作用域渲染并使用一個(gè)組件

這個(gè)涉及到ReactDOM.unstable_renderSubtreeIntoContainer這個(gè)接口， 但是這個(gè)接口文檔上是沒(méi)有的，并且被標(biāo)注了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里的用法

簽名和定義可以見(jiàn)這里，上面有注釋

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