成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Taste / 2607人閱讀

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

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

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

歡迎訂閱我的博客。

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

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

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

一個(gè)完整DEMO:


點(diǎn)擊運(yùn)行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);
  }
`

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110185.html

相關(guān)文章

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

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

    mrcode 評(píng)論0 收藏0

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

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

    weknow619 評(píng)論0 收藏0

  • 移動(dòng)彈窗基礎(chǔ)知識(shí)淺析——IOS彈窗體系

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

    jas0n 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<