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 相关文章推荐
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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.MVC的模板标签系统(四)
2006/09/05 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
js函数般调用正则
2008/04/08 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
Python列表计数及插入实例
2014/12/17 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
简单谈谈python中的多进程
2016/11/06 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
高中数学教师求职信
2013/10/30 职场文书
文明好少年事迹材料
2014/08/19 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
邹越演讲观后感
2015/06/15 职场文书
消防宣传语大全
2015/07/13 职场文书