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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
js中top的作用深入剖析
Mar 04 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
小程序实现筛子抽奖
May 26 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 执行系统命令的方法
2009/07/07 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
javascript实现数字验证码的简单实例
2014/02/10 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
JS常见算法详解
2017/02/28 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
python友情链接检查方法
2015/07/08 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Python中的asyncio代码详解
2019/06/10 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
python异常处理和日志处理方式
2019/12/24 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
恐龙的灭绝教学反思
2014/02/12 职场文书
保安队长职务说明书
2014/02/23 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
会计工作总结范文2014
2014/12/23 职场文书
庆七一晚会主持词
2015/06/30 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby