国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用React手寫一個對話框或模態框

Taste / 2540人閱讀

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

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

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

歡迎訂閱我的博客。

所以，我們可以這樣寫一個對話框或模態框：

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

一個新的div會出現在body內部：

一個完整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和訂閱我的原創前端技術博客。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110185.html

相關文章

  • 用vue實現模態框組件

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

    mrcode 評論0 收藏0

  • 寫一個單例構造的對話框

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

    weknow619 評論0 收藏0

  • 移動彈窗基礎知識淺析——IOS彈窗體系

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

    jas0n 評論0 收藏0

發表評論

0條評論

Taste

男|高級講師

TA的文章

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