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

wangshijun 發布于2019-08-23 13:48 / 609人閱讀

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

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模版，只要將里面的內容替換，就能做到不同的Dialog，比如替換成時間選擇器，那就是一個DateDialog：

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

效果如下：

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

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

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

React入門0x017: 函數組件

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

weapon 2019-08-23 13:50 評論0 收藏0
讀zent源碼庫之Dialog組件實現

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

陳江龍 2019-08-22 18:11 評論0 收藏0
為什么 React16 對開發人員來說是一種福音

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

BicycleWarrior 2019-08-26 13:45 評論0 收藏0
【譯】為什么 React16 對開發人員來說是一種福音

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

kbyyd24 2019-05-23 17:30 評論0 收藏0
使用 Portal 優雅實現“浮”在頁面上的組件

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

jk_v1 2019-08-21 17:56 評論0 收藏0