想用react寫一個(gè)公用的彈跳窗模組,類似螞蟻金服種的react Modal方法。
我不知道這個(gè)實(shí)現(xiàn)的原理是什麼?怎麼才能把我寫的彈跳窗插入到頁面最後去呢?
光陰似箭催人老,日月如移越少年。
去看Modal實(shí)現(xiàn)的源碼,很好看懂。簡單來說就是:
let p = createElement('p');
document.body.appendChild(p);
ReactDOM.render(<Modal />, p);
modal是否可見根據(jù)他的visible判斷,這是今天寫的一個(gè)行動(dòng)端的程式碼。不太清楚你說的什麼意思
其實(shí)就是脫離react作用域渲染並使用一個(gè)元件
這個(gè)涉及到ReactDOM.unstable_renderSubtreeIntoContainer這個(gè)接口,
但是這個(gè)接口文檔上是沒有的,並且被標(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裡的用法
簽名和定義可以見這裡,上面有註解
其實(shí)我也沒完全理解這個(gè)介面的用法...不保證正確,題主還是自己看上面連接裡的程式碼吧