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

followWinter

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中间的组件将被挂载到PortalCompprops.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>
        }
    }
  • 效果

    clipboard.png

  • 说明:
    这样,我们就写出了一个通用的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>
            );
        }
    }

    效果如下:

    clipboard.png

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

阅读 434

漫漫填坑路,十里长安响码声。
哎,好像不能申请多个专栏呢,原本这个专栏只放前端文章,现在看来不行了!就都放吧!

暂时没有

1.5k 声望
54 粉丝
0 条评论

暂时没有

1.5k 声望
54 粉丝
宣传栏