由于强大的mixin功能,在react组件开发过程中存在众多不理于组件维护的因素,所以react社区提出了新的方法来替换mixin,那就是高阶组件;

首先在工程中安装高阶组件所需的依赖:

npm install @babel/plugin-proposal-decorators

然后输入命令npm eject,接着在工程中找到webpack.config.js,找到下图中的位置:

//在plugins数组里添加下面这个元素,保存即可
['@babel/plugin-proposal-decorators', { "legacy": true }],

配置好之后:创建两个组件:(MyContainer:高阶组件)、(MyComponent:普通组件)

高阶组件:MyContainer/index.js

// 高阶组件 myContainer
import React,{Component} from 'react'; const MyContainer =(WrappedComponent)=>{
return class extends Component{
constructor(props){
super(props);
this.state={
name:'',
};
this.onNameChange=this.onNameChange.bind(this); }
onNameChange(event){
console.log(event.target.value);
this.setState({
name:event.target.value,
})
}
render(){
const newProps={
name:{
value:this.state.name,
onChange:this.onNameChange
}
}
return <WrappedComponent {...this.props} {...newProps}></WrappedComponent>
}
}
}
export default MyContainer;

普通组件:MyComponent/index.js

//需要用高阶组件中的peops的组件
import React,{Component} from 'react';
import MyContainer from '../Mycontainer/index'; @MyContainer
class MyComponent extends Component{
componentDidMount=()=>{
console.log(this.props)
}
render(){
return <input name="MyComponent" {...this.props.name} onChange={this.props.name.onChange}></input>
}
}
export default MyComponent;

到这里,MyComponent组件就可以使用高阶组件里面的公共属性和方法了,提高了代码的复用性;

react 高阶组件的实现的更多相关文章

  1. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  2. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  3. react高阶组件的理解

    [高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...

  4. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  5. React高阶组件学习笔记

    高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...

  6. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  7. react高阶组件的一些运用

    今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...

  8. React——高阶组件

    1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...

  9. react 高阶组件的 理解和应用

    高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...

  10. react高阶组件的使用

    为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...

随机推荐

  1. 教学日志:javaSE-java中的数据类型和运算符

    一.java中的标识符 /* 标识符的命名规范: 硬性要求: 1.必须以字母._下划线.美元符$开头 2.其它部分可以是字母.下划线"_".美元符"$"和数字的 ...

  2. python学习第六天:python基础(条件判断、循环)

    条件判断 格式 if <条件判断1>: <执行1> elif <条件判断2>: <执行2> elif <条件判断3>: <执行3> ...

  3. .Net Core&Agile Config配置中心

    当服务逐渐的增多,对各服务的配置管理愈加重要,轻量级的配置中心,入手或是搭建都简单许多,基于.net core开发的轻量级配置中心AgileConfig,功能强大,上手简单. https://gith ...

  4. 为什么加密后的数据往往都是base64输出而不是hex16进制输出

    通常加密后的数据都是字节数组,比如流行的aes128对称加密,还有Rsa非对称加密,加密后得到了一个字节数组,这个字节数组存在内存中,往往我们需要输出得到我们人眼能看到的字符. 加密aes(xxx) ...

  5. .net core集成使用EasyNetQ来使用rabbitmq

    之前有写到一篇介绍EasyNetQ的博文(C# .net 使用rabbitmq消息队列--EasyNetQ插件介绍),所以本文从.net core的角度去继承使用EasyNetQ,而用法类似于之前集成 ...

  6. Linux-saltstack-4 jinjia模板得基本使用

    @ 目录 一.简介 二.jinja2语法 1.jinja2变量 1.1 配置文件中使用jinja变量 1.2在脚本中定义jinja变量 1.3在脚本中设置grains变量 例子1:单值 例子2:多值 ...

  7. Ubuntu18.04编译Zircon

    1.获取源代码 git clone https://fuchsia.googlesource.com/zircon 2.安装编译环境 sudo apt-get install texinfo libg ...

  8. MYSQL实现上一条下一条功能

    select id from(select *, (@i:=@i+1) as rownum from pre_bet_zhibo,(select @i:=0) as itwhere link_cone ...

  9. 新增访客数量MR统计之数据库准备

    关注公众号:分享电脑学习回复"百度云盘" 可以免费获取所有学习文档的代码(不定期更新)云盘目录说明:tools目录是安装包res 目录是每一个课件对应的代码和资源等doc 目录是一 ...

  10. PPT2010制作充电动画

    原文: https://www.toutiao.com/i6492264647318569486/ 启动PPT2010,新建一张空白幻灯片 选择"插入"选项卡,"插图&q ...