React组件封装集合
发布在前端JavaScript开发2018年11月1日view:327AJAXPhyllisReatH前端开发ExpressftaletkfzeSass,LessReact Native正则表达式web框架物理引擎前端工程师网站安全
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前言

一直以来,都是在项目中将公共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,快速升职加薪,走上人生巅峰。 联系我们

评论
发表评论
暂无评论
WRITTEN BY
前端攻城小牛
你所谓的稳定不过是在浪费生命
TA的新浪微博
PUBLISHED IN
前端JavaScript开发

enter code here往前端这条不归路再次迈进

友情链接 大搜车前端团队博客
我的收藏