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 Number对象 学习
Jul 19 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
js实现随机点名小功能
Aug 17 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
原生JS实现多条件筛选
Aug 19 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
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
JS字符串处理实例代码
2013/08/05 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
实例讲解React 组件
2020/07/07 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
中层干部岗位职责
2013/12/18 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
投诉信格式范文
2015/07/02 职场文书
正确使用MySQL update语句
2021/05/26 MySQL