react 高阶组件的实现
由于强大的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 高阶组件的实现的更多相关文章
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- 当初要是看了这篇,React高阶组件早会了
当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...
- react高阶组件的理解
[高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
- React高阶组件学习笔记
高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- react高阶组件的一些运用
今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...
- React——高阶组件
1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...
- react 高阶组件的 理解和应用
高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...
- react高阶组件的使用
为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...
随机推荐
- 教学日志:javaSE-java中的数据类型和运算符
一.java中的标识符 /* 标识符的命名规范: 硬性要求: 1.必须以字母._下划线.美元符$开头 2.其它部分可以是字母.下划线"_".美元符"$"和数字的 ...
- python学习第六天:python基础(条件判断、循环)
条件判断 格式 if <条件判断1>: <执行1> elif <条件判断2>: <执行2> elif <条件判断3>: <执行3> ...
- .Net Core&Agile Config配置中心
当服务逐渐的增多,对各服务的配置管理愈加重要,轻量级的配置中心,入手或是搭建都简单许多,基于.net core开发的轻量级配置中心AgileConfig,功能强大,上手简单. https://gith ...
- 为什么加密后的数据往往都是base64输出而不是hex16进制输出
通常加密后的数据都是字节数组,比如流行的aes128对称加密,还有Rsa非对称加密,加密后得到了一个字节数组,这个字节数组存在内存中,往往我们需要输出得到我们人眼能看到的字符. 加密aes(xxx) ...
- .net core集成使用EasyNetQ来使用rabbitmq
之前有写到一篇介绍EasyNetQ的博文(C# .net 使用rabbitmq消息队列--EasyNetQ插件介绍),所以本文从.net core的角度去继承使用EasyNetQ,而用法类似于之前集成 ...
- Linux-saltstack-4 jinjia模板得基本使用
@ 目录 一.简介 二.jinja2语法 1.jinja2变量 1.1 配置文件中使用jinja变量 1.2在脚本中定义jinja变量 1.3在脚本中设置grains变量 例子1:单值 例子2:多值 ...
- Ubuntu18.04编译Zircon
1.获取源代码 git clone https://fuchsia.googlesource.com/zircon 2.安装编译环境 sudo apt-get install texinfo libg ...
- MYSQL实现上一条下一条功能
select id from(select *, (@i:=@i+1) as rownum from pre_bet_zhibo,(select @i:=0) as itwhere link_cone ...
- 新增访客数量MR统计之数据库准备
关注公众号:分享电脑学习回复"百度云盘" 可以免费获取所有学习文档的代码(不定期更新)云盘目录说明:tools目录是安装包res 目录是每一个课件对应的代码和资源等doc 目录是一 ...
- PPT2010制作充电动画
原文: https://www.toutiao.com/i6492264647318569486/ 启动PPT2010,新建一张空白幻灯片 选择"插入"选项卡,"插图&q ...