一个抽屉(Drawer)组件会有如下需求点:
能控制抽屉是否可见
能手动配置抽屉的关闭按钮
能控制抽屉的打开方向
关闭抽屉时是否销毁里面的子元素(这个问题是工作中频繁遇到的问题)
指定 Drawer 挂载的...null : children
}
div>
div>
)
return childDom
}
上述代码中我们省略了部分不相关代码, 主要来关注isDesChild..., 可以从左弹出,也可以从右弹出, 实现过程也比较简单,我们主要要更具属性动态修改定位属性即可,这里我们会用到es新版的新特性,对象的变量属性....PropTypes.string,
onClose: PropTypes.func
}
关于prop-types的使用官网上有很详细的案例,这里说一点就是oneOfType的用法, 它用来支持一个组件可能是多种类型中的一个...right: 10px;
color: #ccc;
cursor: pointer;
}
}
}
通过以上步骤, 一个功能强大的的drawer组件就完成了,关于代码中的
云服务器
ICP备案
即时通信 IM
云直播
实时音视频
