成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用React手寫一個對話框或模態(tài)框

Taste / 2559人閱讀

摘要：打算用寫對話框已經(jīng)很長一段時間，現(xiàn)在是時候兌現(xiàn)承諾了。核心在于使用的接口。該接口將渲染后的節(jié)點嵌入通常是，并保證只嵌入一次。所以，我們可以這樣寫一個對話框或模態(tài)框一個新的會出現(xiàn)在內(nèi)部一個完整點擊運行感謝你花時間閱讀這篇文章。

打算用React寫對話框已經(jīng)很長一段時間，現(xiàn)在是時候兌現(xiàn)承諾了。實際上，寫起來相當簡單。

核心在于使用React的接口React.createPortal(element, domContainer)。該接口將element渲染后的DOM節(jié)點嵌入domContainer(通常是document.body)，并保證只嵌入一次。

歡迎訂閱我的博客。

所以，我們可以這樣寫一個對話框或模態(tài)框：

function Dialog() {
    return React.createPortal( 
Dialog contents
, document.body )
}

一個新的div會出現(xiàn)在body內(nèi)部：

一個完整DEMO:


點擊運行DEMO

class Modal extends React.Component {
  render() {
    const {
      visible,
      onClose
    } = this.props
    return visible && ReactDOM.createPortal(
      

        Content
        

        
      

    , document.body)
  }
}

class App extends React.Component {
  state = {
    visibleModal: false
  }
  showModal = () => this.setState( { visibleModal: true } )
  handleCloseModal = () => this.setState( { visibleModal: false } )
  render() {
    const { visibleModal } = this.state
    return 

    
    
  

  }
}

const StyledModalRoot = styled.div`
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: rgba( 0, 0, 0, 0.2 );

  >.box {
    position: relative;
    display: grid;
    place-items: center;
    width: 80%;
    height: 80%;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
  }
`

感謝你花時間閱讀這篇文章。如果你喜歡這篇文章,歡迎點贊、收藏和分享，讓更多的人看到這篇文章，這也是對我最大的鼓勵和支持！
歡迎在Star和訂閱我的原創(chuàng)前端技術(shù)博客。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110185.html

相關(guān)文章

  • 用vue實現(xiàn)模態(tài)框組件

    摘要：組件結(jié)構(gòu)頭部內(nèi)容區(qū)域尾部操作按鈕模態(tài)框結(jié)構(gòu)分為三部分，分別為頭部內(nèi)部區(qū)域和操作區(qū)域，都提供了，可以根據(jù)需要定制。調(diào)用點擊確定按鈕的回調(diào)處理點擊取消按鈕的回調(diào)處理用創(chuàng)建一個索引就很方便拿到模態(tài)框組件內(nèi)部的方法了。 基本上每個項目都需要用到模態(tài)框組件，由于在最近的項目中，alert組件和confirm是兩套完全不一樣的設(shè)計，所以我將他們分成了兩個組件，本文主要討論的是confirm組件的實...

    mrcode 評論0 收藏0

  • 寫一個單例構(gòu)造的對話框

    摘要：前言項目中，當需要用戶處理事務(wù)，又不希望跳轉(zhuǎn)頁面以致打斷工作流程時，我們會經(jīng)常使用到對話框去承載相應(yīng)的操作。雖然用得多，但是很多人其實并不知道怎么去寫。饒有興趣，自己嘗試寫了一個。 前言 項目中，當需要用戶處理事務(wù)，又不希望跳轉(zhuǎn)頁面以致打斷工作流程時，我們會經(jīng)常使用到對話框去承載相應(yīng)的操作。雖然用得多，但是很多人其實并不知道怎么去寫。饒有興趣，自己嘗試寫了一個。 API 參數(shù) ...

    weknow619 評論0 收藏0

  • 移動彈窗基礎(chǔ)知識淺析——IOS彈窗體系

    摘要：尤其是遇到二次確認等場景因此，打算從頭整理移動彈窗的基礎(chǔ)知識，以彈窗體系為切入點，從定義出發(fā)，對移動彈窗進行分類，然后分別分析每一類彈窗的應(yīng)用場景，以及在使用過程中需要注意的點。 摘要： 最為常見的【彈窗】反而是最捉摸不定的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場景下應(yīng)該用哪種彈窗。尤其是遇到二次確認等場景…… 因此，打算從頭整理移動彈窗的基礎(chǔ)知識，以iOS彈窗體系為切入點，從...

    jas0n 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<