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>
        );
    }
}

效果如下：

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