react高阶组件添加和删除props


Posted in Javascript onApril 26, 2019

唠叨几句啦

在看程墨老师的深入浅出高阶组件,开头一点提了一个需要,创建两个高阶组件,一个能给传入的元素自定义添加props,一个是删除特定的props。我刚刚做了一下,发现高阶组件需要区分好传入的是class还是react element, 同时也需要注意好return回去的是啥。顺便提一下高阶组件的概念,就说一个函数,能够接受一个组件作为参数,然后返回的时候,这个组件就带有这个高阶组件给的某些特性。我理解就跟掉泥坑了,得带点土出来一个道理。

对比一下两个组件,贴代码时刻来啦

删除属性的高阶组件

我们需要传入任何组件和参数,都把user参数给删除了,所以返回值是一个接收props属性的函数。

import React from "react"

function removeUserProp(WrappedComponent) {
  return function newRender(props) {
    const {user, ...otherProps} = props;// 删除user这个属性值
    return <WrappedComponent {...otherProps} />
  }
}

export default removeUserProp

使用的时候

const RemoveComponent = removeUserProp(reactComponentClass)({user: "aa"});// 这里返回的是一个react component
 render () {
  return <div>
        {RemoveComponent}
      </div>
 }

增加属性的高阶组件

import React from "react"

const addNewProps = function (WrappedComponent, newProps) {// 接收的是一个class作为参数,返回一个class
  return class WrappingComponent extends React.Component {
    render () {
      return <WrappedComponent {...this.props} {...newProps}/>
    } 
  }
}

export default addNewProps

使用的时候,返回值是class,所以要用<ReactClassName/>转换成可以渲染的react组件

const AddUserComponent = addNewProps(SampleComponent, {user: "aa"})
  render () {
    return <AddUserComponent />
  }

完整的使用的例子代码:

import React from "react"
import addNewProps from './addNewProps'
import removeUserProp from './removeUserProp'

class SampleComponent extends React.Component {

  constructor(props) {
    console.log(props)
    super(props)
  }

  render () {
    console.log(this.props)
    return <div>
        {
         this.props.user ? <p>哈哈哈</p> : <p>哈哈哈2</p>
        }   
        </div>
  }
}


class Test extends React.Component {

  render () {
    var obj = {aa: "aa"}
    const AddUserComponent = addNewProps(SampleComponent, {user: "aa"})
    const RemoveUserComponent = removeUserProp(SampleComponent)({user: "aa"})
   
    return <div>
         <AddUserComponent />
         {RemoveUserComponent}
        </div>
    
  }
}

export default Test

一点点小收获就是明白了高阶组件要看清楚输入输出。class跟react element的区别。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 #Javascript
vue 进阶之实现父子组件间的传值
Apr 26 #Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 #Javascript
配置一个vue3.0项目的完整步骤
Apr 26 #Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 #Javascript
JS异步错误捕获的一些事小结
Apr 26 #Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 #Javascript
You might like
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
微信小程序签到功能
2018/10/31 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python docx库用法示例分析
2019/02/16 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python实现按行分割文件
2019/07/22 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python实现大学人员管理系统
2019/10/25 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
.net C#面试题
2012/08/28 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
护理不良事件检讨书
2014/02/06 职场文书
英文自荐信常用句子
2014/03/26 职场文书
护林防火标语
2014/06/27 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers