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

0x001 Portal

先上栗子再说话：

class PortalComp extends React.Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

class App extends React.Component {
    render() {
        return <PortalComp>
            hehe
        </PortalComp>
    }
}

ReactDom.render(
    <App/>,
    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 (
              <div style={DialogContainer}>
                  <div style={DialogContent}>
                      {this.props.children}
                  </div>
              </div>
          );
      }
  }
  
  class App extends React.Component {
      render() {
          return <div>
              <Dialog>
                  <p className='text-center'>这是一个dialog</p>
                  <div className='text-center'>
                      <button className='btn btn-primary'>确认</button>
                      <button  className='btn btn-danger'>取消</button>
                  </div>
              </Dialog>
          </div>
      }
  }

• 效果

  

• 说明：
  这样，我们就写出了一个通用的Dialog模版，只要将里面的内容替换，就能做到不同的Dialog，比如替换成时间选择器，那就是一个DateDialog：

  class DateDialog extends React.Component{
      render() {
          return (
              <Dialog>
                  <p className='text-center'>请选择时间</p>
                  <input type="date" className='form-control'/>
                  <div className='text-center mt-2'>
                      <button className='btn btn-primary'>确认</button>
                      <button  className='btn btn-danger'>取消</button>
                  </div>
              </Dialog>
          );
      }
  }

  效果如下：

  

  所以使用这种组合的方式将会衍生出无数的组件，弹窗时间选择器、弹窗、Modal......太帅了