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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
js实现中文实时时钟
Jan 15 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网上调查系统
2006/10/09 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JavaScript 基本概念
2015/01/20 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
Javascript中神奇的this
2016/01/20 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
深入理解python try异常处理机制
2016/06/01 Python
儿童python练习实例
2018/05/27 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
企业为何需要商业计划书
2013/12/26 职场文书
2014全国两会心得体会
2014/03/17 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
婚前协议书范本
2014/04/15 职场文书
关于美容院的活动方案
2014/08/14 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
文明单位申报材料
2014/12/23 职场文书
2015年计生工作总结范文
2015/04/24 职场文书