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