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 相关文章推荐
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js style动态设置table高度
Oct 21 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
Vuex的API文档说明详解
Feb 05 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
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
php创建session的方法实例详解
2015/01/27 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
html下载本地
2006/06/19 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Python获取邮件地址的方法
2015/07/10 Python
在centos7中分布式部署pyspider
2017/05/03 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
Python3爬虫学习入门教程
2018/12/11 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
百度JavaScript笔试题
2015/01/15 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
找工作最新求职信
2013/12/22 职场文书
端午节活动总结
2014/08/26 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
新教师教学工作总结
2015/08/12 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python