React教程之封装一个Portal可复用组件的方法
Portal简介
所以我们需要的一个通用组件，它做如下的事情：
- 可以声明式的写在一个组件中
- 并不真正render在被声明的地方
- 支持过渡动画
那么，像modal、tooltip、notification等组件都是可以基于这个组件的。我们叫这个组件为Portal。
使用了React16+的你，对Portal至少有所了解或者熟练使用。
Portal可以创建一个在你的root元素之外的DOM。
1、通常你的网站只有一个root
<body> <div id="root"></div> </body>
2、使用Portal之后，可以变成下面这样
<body> <div id="root"></div> <div id="portal"></div> </body>
Portal高阶组件封装
Portal的demo在官网上可以看到，而我们要实现的是将它封装成一个可以复用的组件。
目标
不需要手动在body下面增加HTML，通过组件自己去创建。
<CreatePortal id, //可以传入id className, //可以传入className style //可以传入style > 此处插入div或者react组件 </CreatePortal>
实现方案
1、创建一个createPortal函数，该函数将会return一个Portal组件
function createPortal() {
}
export default createPortal()
2、创建Portal组件
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
class Portal extends React.Component{
}
return Portal
}
export default createPortal()
3、render函数实现，用createPortal创建portal。
render() {
return ReactDOM.createPortal(
this.props.children,
this.el
)
}
4、componentDidMount函数实现，将dom添加到body下面
componentDidMount() {
document.body.appendChild(this.el);
}
5、componentWillUnmount函数实现，清除DOM结构
componentWillUnmount() {
document.body.removeChild(this.el)
}
6、实现props，包括id、className、style
constructor(props) {
super(props)
this.el = document.createElement('div')
if (!!props) {
this.el.id = props.id || false
if (props.className) this.el.className = props.className
if (props.style) {
Object.keys(props.style).map((v) => {
this.el.style[v] = props.style[v]
})
}
document.body.appendChild(this.el)
}
}
7、完整代码
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
class Portal extends React.Component{
constructor(props) {
super(props)
this.el = document.createElement('div')
if (!!props) {
this.el.id = props.id || false
if (props.className) this.el.className = props.className
if (props.style) {
Object.keys(props.style).map((v) => {
this.el.style[v] = props.style[v]
})
}
document.body.appendChild(this.el)
}
}
componentDidMount() {
document.body.appendChild(this.el);
}
componentWillUnmount() {
document.body.removeChild(this.el)
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el
)
}
}
Portal.propTypes = {
style: PropTypes.object
}
return Portal
}
export default createPortal()
总结
createPortal和Provide实现思想类似，用函数式编程的思想来完成目标。如果你觉得这东西有用，拿去用吧。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下. 无状态函数式组件 创建无状态函数式组件形式是从React 0.14版本开始出现的.它是为了创建纯展示组件,这种组件
-
react 父组件与子组件之间的值传递的方法
概念上,组件是封闭的环境.React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事.以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据. 那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个方法(函数),然后传递给子组件的props,子组件在事件触发时,直接呼叫这个props所设置的方法(函数).但这中间,有谁(对象)呼叫了函数的设置,也就是this的作用. 父组件到子组件用props设置,子组件到父组件用上面说的方式,这是基本的套路,但
-
React组件的三种写法总结
React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模
-
使用React实现轮播效果组件示例代码
前言 我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变.但是React是通过prop和state来改变view层的状态.下面是我写的一个轮播图组件,可以直接看一下.代码很简单.原理就是通过React在componentDidMount后改变setState,来动态改变css样式. 说明以下:看gif很卡,但是实际效果还是很好的. 以下是示例代码 LunBo.js require('styles/App.css'); req
-
React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化. /***实现在输入框输入邮箱时,在div中即时显示输入内容***/ <body> <div id="test"></div> </body> //子组件 var Child = React.createClass({ re
-
React教程之封装一个Portal可复用组件的方法
Portal简介 所以我们需要的一个通用组件,它做如下的事情: 可以声明式的写在一个组件中 并不真正render在被声明的地方 支持过渡动画 那么,像modal.tooltip.notification等组件都是可以基于这个组件的.我们叫这个组件为Portal. 使用了React16+的你,对Portal至少有所了解或者熟练使用. Portal可以创建一个在你的root元素之外的DOM. 1.通常你的网站只有一个root <body> <div id="root"&g
-
vue封装一个图案手势锁组件
目录 说在前面 效果展示 预览地址 实现步骤 1.组件设计 2.组件分析 3.组件实现 4.组件使用 组件库引用 源码地址 组件文档 说在前面 现在很多人都喜欢使用图案手势锁,这里我使用vue来封装了一个可以直接使用的组件,在这里记录一下这个组件的开发步骤. 效果展示 组件实现效果如下图: 预览地址 http://jyeontu.xyz/jvuewheel/#/JAppsLock 实现步骤 完成一个组件需要几步? 1.组件设计 首先我们应该要知道我们要做怎样的组件,具备怎样的功能,这样才可以开始
-
Vue实现封装一个切片上传组件
目录 组件效果 使用文档 封装过程 1. 文件切片 2. 构造切片请求参数 3. 控制分片请求的并发 完整代码 待完善 组件效果 单文件切片上传 多文件切片上传 组件使用案例 <template> <div id="app"> <div class="upload-wrap"> <UploadSlice :action="uploadInfoSlice.actionChunk" :headers=&quo
-
封装一个最简单ErrorBoundary组件处理react异常
前言 从 React 16 开始,引入了 Error Boundaries 概念,它可以捕获它的子组件中产生的错误,记录错误日志,并展示降级内容,具体 官网地址 错误边界避免一个组件错误导致整个页面白屏不能使用等情况,使用优雅降级的方式呈现备用的 UI,错误边界可以在渲染期间.生命周期和整个组件树的构造函数中捕获错误.自 React 16 起,任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载 ErrorBoundary 意义 某些 UI 崩溃,不至于整个 webapp 崩溃 在浏
-
vue tree封装一个可选的树组件方式
目录 组件实现的基本功能 先看效果图 组件实现的基本功能 1,根据后端返回的数据格式,传入组件动态的渲染出当前角色有哪些权限(新建,修改) 2,适配有2级和只有一级多选的数据 3,有全选(√) ,全不选 ,部分已选(-)的3装状态,每一级都支持(用的iview2次封装) 4,改变之后返回当前选中的所有权限的id,用于提交 5,手风琴效果,小屏适配 先看效果图 有部分权限没打开 打开 小屏 权限数据结构,select_status=1表示选中 默认添加没有权限的初始数据结构 有些数据只有一级子菜单
-
基于vue-upload-component封装一个图片上传组件的示例
需求分析 业务要求,需要一个图片上传控件,需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览 因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要
-
vue element-ui之怎么封装一个自己的组件的详解
为什么要进行组件封装? 封装的目的就是为了能够更加便捷.快速的进行业务功能的开发.组件(component)是vue的最强大功能之一,组件可以实现一些类似功能的复用及与其它业务逻辑的解耦.在开发中,我们难免会写很多类似的.重复的代码,有时候两个业务模块有相似的功能,采用复制粘贴已经很省事,但如果涉及的字段或有一些小差别,你也会觉得很烦,毕竟你要从头到尾瞅着去改动.这时候如果把那些相同的功能,抽象出来抽离成组件,通过组件引用方式就会显得格外省事了. Vue中怎么封装一个自己的组件 想要封装好一个组
-
封装好的一个万能检测表单的方法
检测表单中的不能为空(.notnull)的验证 作用:一对form标签下有多个(包括一个)表单需要提交时,使用js准确的判断当前按钮对那些元素做判断 用法:在form标签下 找到当前 表单的容器 给予class="form",当前表单的提交按钮给予 class="check" 需要验证为空的元素给予class="notnull" nullmsg="xx不能为空!"提示,需要进行逻辑判断的表单给予class="n
-
vue2.0 自定义组件的方法（vue组件的封装）
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话很不错了,但是坑也是不少,而且很多功能也是仅凭这些实现不了,这需要我们去封装自己的可复用组件 二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备组件的好数据
-
封装属于自己的JS组件
一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", url: "/User/Edit", data: { data: JSON.stringify(postdata) }, success: function (data, status) { if (status == "success") { toastr.success('提交数据成功');