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

資訊專欄INFORMATION COLUMN

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

wangshijun / 614人閱讀

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

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就是一個Portal，寫在PortalComp中間的組件將被掛載到PortalComp的props.children，所以在PortalComp中可以使用props.children訪問。

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

0x002 實用栗子-通用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 

            
                
這是一個dialog

                

                    
                    
                

            
        

    }
}

效果

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

class DateDialog extends React.Component{
    render() {
        return (
            
                
請選擇時間

                
                

                    
                    
                

            
        );
    }
}

效果如下：

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

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

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

相關(guān)文章

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

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

    weapon 評論0 收藏0

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

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

    陳江龍 評論0 收藏0

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

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

    BicycleWarrior 評論0 收藏0

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

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

    kbyyd24 評論0 收藏0

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

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

    jk_v1 評論0 收藏0

發(fā)表評論

0條評論

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