React组件封装集合
前言
一直以来，都是在项目中将公共React组件放在Common之类的文件夹，今天抽时间把以前博客介绍过的几个React组件抽象出来，挂载到npm上，提供下载安装。
React组件集合列表
下面列举的React组件都可以点击链接去github下载使用，具体安装教程看readme文档。
1、lazy-load-component
提供webpack异步加载React组件的高阶函数。
如果你的react项目使用了webpack，那么可以使用lazyLoadComponent实现代码切割。
import lazyLoadComponent from 'lazy-load-component'
const Login = lazyLoadComponent(() => import('./containers/Login'))
2、create-portal
一个封装好的react portal组件，你不需要在body下面写静态的HTML，使用create-portal可以自动生成DOM结构。
组件用法
<CreatePortal
element={`a`} //String，默认为div
id={`id`} //tring，可以不设置
className={`classname`} //String，可以不设置
style={{width: '100px'}} //Object，可以不设置
>
此处插入div或者react组件
</CreatePortal>
渲染结果
<body>
<div id="root"}>通常这是你的React根入口的元素</div>
<!--portal生成的DOM结构位于根元素之外-->
<a id="id" class="classname" style="width: 100px">
此处插入div或者react组件
</div>
</body>//欢迎加入全栈开发交流群一起学习交流：864305860
3、react-roll-container
采用比IScroll更加轻量的JRoll封装的React组件，可以作为移动端DOM内部CSS3滚动的组件。
它是为了解决移动端body中有多层滚动重叠导致的卡顿和点击穿透问题，比如支付宝app里面的饿了么网站，就存在双层滚动时候的穿透问题。
常用在以下地方：
1、弹框内部的滚动
2、多列表的滚动
3、类似京东移动端垂直固定导航的滚动: 京东移动端页面
4、其他可能的场景
基本用法
import MyJRoll from 'react-roll-container'
class Component extends React.Component {
state = {
height: '100vh'
}
render() {
const { height } = this.state
return (
<MyJRoll height={height + 'px'}>
{/*子组件*/}
</MyJRoll>
)
}
}
//欢迎加入全栈开发交流群一起学习交流：864305860
4、react-markdown-module
基于showdown封装的React-markdown组件，支持showdown的所有option配置项，采用github-markdown-css为默认样式，支持自定义其他样式。
基本用法
import ReactMarkdown from 'react-markdown-module'
const text = `
# Live demo
Changes are automatically rendered as you type.
* Implements [GitHub Flavored Markdown](https://github.github.com/gfm/)
* Renders actual, "native" React DOM elements
* Allows you to escape or skip HTML (try toggling the checkboxes above)
* If you escape or skip the HTML, no `dangerouslySetInnerHTML` is used! Yay!
## HTML block below
`
<ReactMarkdown markHtml={text}/>
5、react-watermark-module
React水印组件，支持图片水印，文字水印。
文字水印基本用法：
<ReactWatermark
imagePath={} //必须，对象，背景图片
textData={'欢迎加入全栈开发交流群一起学习交流：864305860'}
type={'text'} //必须，水印类型
/>
图片水印基本用法：
<ReactWatermark
imagePath={} //必须，对象，背景图片
logoPath={} //必须，logo水印的路径，用require或import导入
type={'logo'} //必须，水印类型
/>
总结
还有很多可以用React来封装成小插件的东西，如果你也有想法，可以私信我，把你写的React组件也添加进来。
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
联系我们
