国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 螞蟻金服裡的react Modal方法,是怎麼把元素插入到頁面最後的
大家講道理
大家講道理 2017-07-05 10:58:47
0
4
1253

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

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


大家講道理
大家講道理

光陰似箭催人老,日月如移越少年。

全部回覆(4)
迷茫

去看Modal實(shí)現(xiàn)的源碼,很好看懂。簡單來說就是:

let p = createElement('p');
document.body.appendChild(p);
ReactDOM.render(<Modal />, p);
過去多啦不再A夢

@ssruoyan
你這麼寫用ES6語法如何實(shí)現(xiàn)?

給我你的懷抱

modal是否可見根據(jù)他的visible判斷,這是今天寫的一個(gè)行動(dòng)端的程式碼。不太清楚你說的什麼意思

typecho

其實(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è)介面的用法...不保證正確,題主還是自己看上面連接裡的程式碼吧

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板