React入门0x015: Portal-如果可以更愿意称为`容器`

wangshijun 发布于2019-08-23 13:48 / 580人阅读

摘要：先上栗子再说话如上的就是一个，写在中间的组件将被挂载到的，所以在中可以使用访问。在英文中为门入口的意思，但是我更喜欢称之为容器，这不是音译意译，而是表译。一个组件看过去就像是一个容器啊，可以将子组件包装起来，装啥都行，就像一个垃圾桶。

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......太帅了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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