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

資訊專欄INFORMATION COLUMN

React入門0x015: Portal-如果可以更愿意稱為`容器`

wangshijun / 659人閱讀

摘要：先上栗子再說話如上的就是一個(gè)，寫在中間的組件將被掛載到的，所以在中可以使用訪問。在英文中為門入口的意思，但是我更喜歡稱之為容器，這不是音譯意譯，而是表譯。一個(gè)組件看過去就像是一個(gè)容器啊，可以將子組件包裝起來，裝啥都行，就像一個(gè)垃圾桶。

0x001 Portal

先上栗子再說話：

class PortalComp extends React.Component {
    render() {
        return (
            

                {this.props.children}
            

        );
    }
}

class App extends React.Component {
    render() {
        return 
            hehe
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app"))

如上的PortalComp就是一個(gè)Portal，寫在PortalComp中間的組件將被掛載到PortalComp的props.children，所以在PortalComp中可以使用props.children訪問。

Portal在英文中為門、入口的意思，但是我更喜歡稱之為容器，這不是音譯、意譯，而是表譯。一個(gè)Portal組件看過去就像是一個(gè)容器啊，可以將子組件包裝起來，裝啥都行，就像一個(gè)垃圾桶。

0x002 實(shí)用栗子-通用Dialog

源碼

const DialogContainer={position:"absolute",left:"0",top:"0",width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)"}
const DialogContent={backgroundColor:"#ffffff",marginTop:"200px",width:"200px",marginLeft:"auto",marginRight:"auto",padding:"10px"}
class Dialog extends React.Component {
    render() {
        return (
            

                

                    {this.props.children}
                

            

        );
    }
}

class App extends React.Component {
    render() {
        return 

            
                
這是一個(gè)dialog

                

                    
                    
                

            
        

    }
}

效果

說明：
這樣，我們就寫出了一個(gè)通用的Dialog模版，只要將里面的內(nèi)容替換，就能做到不同的Dialog，比如替換成時(shí)間選擇器，那就是一個(gè)DateDialog：

class DateDialog extends React.Component{
    render() {
        return (
            
                
請(qǐng)選擇時(shí)間

                
                

                    
                    
                

            
        );
    }
}

效果如下：

所以使用這種組合的方式將會(huì)衍生出無數(shù)的組件，彈窗時(shí)間選擇器、彈窗、Modal......太帥了

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

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

相關(guān)文章

  • React入門0x017: 函數(shù)組件

    摘要：概述函數(shù)組件其實(shí)就是一個(gè)函數(shù)，一個(gè)函數(shù)。所以可以用來做一些快速的封裝，比如，一個(gè)組件的代碼太多，顯得咋亂，又沒有復(fù)雜到需要另起一個(gè)組件，可以用函數(shù)組件源碼這是標(biāo)題欄這是導(dǎo)航欄哈哈效果總結(jié)沒有多余的東西，對(duì)性能也有所提升哦 0x000 概述 函數(shù)組件其實(shí)就是一個(gè)函數(shù)，一個(gè)render函數(shù)。 0x001 栗子 源碼 import React from react import Reac...

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

  • 讀zent源碼庫之Dialog組件實(shí)現(xiàn)

    摘要：但是，最后一步，事件怎么綁定呢這塊沒有深入研究了，不過我想，應(yīng)該這樣去實(shí)現(xiàn)也是沒有問題的。的具體做法是，把方法放到了一個(gè)叫做的組件上去實(shí)現(xiàn)這個(gè)功能，然后再把內(nèi)容放進(jìn)這個(gè)組件。其他的邏輯比如顯示隱藏之類，全部都放到組件自身上去實(shí)現(xiàn)。 1、Dialog組件提供什么功能，解決什么問題？ zent的Dialog組件，使用姿勢(shì)是這樣的（代碼摘自zent官方文檔：https://www.youza...

    陳江龍 評(píng)論0 收藏0

  • 為什么 React16 對(duì)開發(fā)人員來說是一種福音

    摘要：就像人們對(duì)更新移動(dòng)應(yīng)用程序和操作系統(tǒng)感到興奮一樣，開發(fā)人員也應(yīng)該對(duì)更新框架感到興奮。錯(cuò)誤邊界是一種組件。注意將作為值傳遞進(jìn)去并不會(huì)導(dǎo)致使用。如果兩者不同，則返回一個(gè)用于更新狀態(tài)的對(duì)象，否則就返回，表示不需要更新狀態(tài)。 就像人們對(duì)更新移動(dòng)應(yīng)用程序和操作系統(tǒng)感到興奮一樣，開發(fā)人員也應(yīng)該對(duì)更新框架感到興奮。不同框架的新版本具有新特性和開箱即用的技巧。 下面是將現(xiàn)有應(yīng)用程序從 React 15...

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

  • 【譯】為什么 React16 對(duì)開發(fā)人員來說是一種福音

    摘要：譯者前端小智原文就像人們對(duì)更新移動(dòng)應(yīng)用程序和操作系統(tǒng)感到興奮一樣，開發(fā)人員也應(yīng)該對(duì)更新框架感到興奮。錯(cuò)誤邊界是一種組件。注意將作為值傳遞進(jìn)去并不會(huì)導(dǎo)致使用。如果兩者不同，則返回一個(gè)用于更新狀態(tài)的對(duì)象，否則就返回，表示不需要更新狀態(tài)。 譯者：前端小智 原文：medium.freecodecamp.org/why-react16… 就像人們對(duì)更新移動(dòng)應(yīng)用程序和操作系統(tǒng)感到興奮一樣，開發(fā)人員也應(yīng)...

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

  • 使用 Portal 優(yōu)雅實(shí)現(xiàn)“浮”在頁面上的組件

    摘要：產(chǎn)品需求產(chǎn)品需求，實(shí)現(xiàn)一個(gè)選擇器組件，要求浮在頁面上方。本文討論的主要是，在有類似于組件一樣，浮在頁面的組件時(shí)，如何設(shè)計(jì)組件樹方案一組件是組件的子組件。優(yōu)勢(shì)的顯示狀態(tài)屬于節(jié)點(diǎn)控制，狀態(tài)管理成本低。包括，事件冒泡。 產(chǎn)品需求 產(chǎn)品需求，實(shí)現(xiàn)一個(gè)選擇器 Selector 組件，要求浮在頁面上方。在網(wǎng)上隨便找了個(gè)圖，如下： showImg(https://segmentfault.com/i...

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

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

0條評(píng)論

閱讀需要支付1元查看
<