React组件封装集合

原创 年树先生 随笔 前端技术 6560阅读 13 天前 举报

前言

一直以来,都是在项目中将公共React组件放在Common之类的文件夹,今天抽时间把以前博客介绍过的几个React组件抽象出来,挂载到npm上,提供下载安装。

React组件集合列表

下面列举的React组件都可以点击链接去github下载使用,具体安装教程看readme文档。

1、lazy-load-component

提供webpack异步加载React组件的高阶函数。

如果你的react项目使用了webpack,那么可以使用lazyLoadComponent实现代码切割。

2、create-portal

一个封装好的react portal组件,你不需要在body下面写静态的HTML,使用create-portal可以自动生成DOM结构。

组件用法

渲染结果

3、react-roll-container

采用比IScroll更加轻量的JRoll封装的React组件,可以作为移动端DOM内部CSS3滚动的组件。

它是为了解决移动端body中有多层滚动重叠导致的卡顿和点击穿透问题,比如支付宝app里面的饿了么网站,就存在双层滚动时候的穿透问题。

常用在以下地方:

1、弹框内部的滚动

2、多列表的滚动

3、类似京东移动端垂直固定导航的滚动: 京东移动端页面

4、其他可能的场景

基本用法

4、react-markdown-module

基于showdown封装的React-markdown组件,支持showdown的所有option配置项,采用github-markdown-css为默认样式,支持自定义其他样式。

基本用法

5、react-watermark-module

React水印组件,支持图片水印,文字水印。

文字水印基本用法:

图片水印基本用法:

总结

还有很多可以用React来封装成小插件的东西,如果你也有想法,可以私信我,把你写的React组件也添加进来。
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。
联系我们

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复