React组件封装集合

最新推荐文章于 2024-07-19 17:18:15 发布

weixin_34124939

最新推荐文章于 2024-07-19 17:18:15 发布

阅读量819

点赞数

文章标签： javascript webpack 面试 ViewUI

原文链接：https://juejin.im/post/5bdb0b0ee51d45195716f577

版权

前言

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

weixin_34124939

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React组件封装集合

前言一直以来，都是在项目中将公共React组件放在Common之类的文件夹，今天抽时间把以前博客介绍过的几个React组件抽象出来，挂载到npm上，提供下载安装。React组件集合列表下面列举的React组件都可以点击链接去github下载使用，具体安装教程看readme文档。1、lazy-load-component提供webpack异步加载React组件的高阶函数。如果你的rea...
复制链接

扫一扫