原始写法

import React, { Component } from "react";//函数组件：：：传递一个组件，返回一个新的组件，以with开头
const withLearnReact = (Comp) => {const NewComp = (props) => {//继承原有的所有属性return <Comp {...props} key2="新增的一个属性"></Comp>;};return NewComp;
};//class组件，重写生命周期
const withLifeCycle = (Comp) => {class NewComp extends Component {componentDidMount() {console.log("NewComp重写componentDidMount()生命周期");}render() {return <Comp {...this.props}></Comp>;}}return NewComp;
};class HOC extends Component {render() {return (<div><h1>高阶组件的用法</h1>这是入参：{this.props.key1} <br></br>这是高阶组件的值： {this.props.key2}</div>);}
}//export default withLearnReact(HOC);
//export default HOC;withLifeCycle
export default withLifeCycle(withLearnReact(HOC));

改写：

安装babel编译插件

npm config set registry https://registry.npm.taobao.orgsudo npm install --save-dev @babel/plugin-proposal-decorators

更改config-override.js配置代码为：

const { override, fixBabelImports, addBabelPlugins } = require("customize-cra");
module.exports = override(//antdfixBabelImports("import", {libraryName: "antd",libraryDirectory: "es",style: "css",}),//HOC 装饰器addBabelPlugins(["@babel/plugin-proposal-decorators",{legacy: true,},])
);

重启项目

npm run start

改写为：在HOC类上添加 @withLearnReact

import React, { Component } from "react";//函数组件：：：传递一个组件，返回一个新的组件，以with开头
const withLearnReact = (Comp) => {const NewComp = (props) => {//继承原有的所有属性return <Comp {...props} key2="新增的一个属性"></Comp>;};return NewComp;
};//class组件，重写生命周期
const withLifeCycle = (Comp) => {class NewComp extends Component {componentDidMount() {console.log("NewComp重写componentDidMount()生命周期");}render() {return <Comp {...this.props}></Comp>;}}return NewComp;
};@withLearnReact
@withLifeCycle
class HOC extends Component {render() {return (<div><h1>高阶组件的用法</h1>这是入参：{this.props.key1} <br></br>这是高阶组件的值： {this.props.key2}</div>);}
}//export default withLearnReact(HOC);
//export default HOC;
//export default withLifeCycle(withLearnReact(HOC));//装饰器写法：在HOC类上添加 @withLearnReact
export default HOC;

React高阶组件HOC配置相关推荐

[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...
React 高阶组件HOC使用总结
HOC(高阶组件) /*HOC(高阶组件): 接收一个组件,返回包装后的组件(增强组件)- 不是React API- 是一种设计模式,类似于装饰器模式- ≈ Mixin && > ...
react 高阶组件HOC实现组件复用
目录一使用步骤二显示鼠标坐标三鼠标随图片移动四设置displayName 五传递props 高阶组件HOC: Higher-Order Component,是一个函数,接收要包装的组 ...
React高阶组件(HOC)的写法归纳
react高阶组件的写法总结什么是高阶组件高阶组件要解决什么问题高阶组件的写法什么是高阶组件何为高阶组件(HOC),根据官方文档的解释:"高阶组件是react中复用组件逻辑的一项高 ...
React 高阶组件HOC详解
参考链接: https://juejin.cn/post/6844903815762673671 https://juejin.cn/post/6844904050236850184 前言高阶组件与 ...
条件渲染之react高阶组件——HOC
定义:它接受任何输入(多数时候是一个组件)并返回一个组件作为输出.返回的组件是输入组件的增强版本,并且可以在 JSX 中使用.不是react api而是一种设计模式. 作用:强化组件,复用逻辑,提升渲 ...
React 高阶组件HOC、设置displayName、高阶组件传递props
文章目录 1. 高阶组件使用步骤 2. 高阶组件设置displayName 3.传递props 1. 高阶组件目的:实现状态逻辑复用.实现功能增强.返回一个增强组件. 高阶组件(HOC,Highe ...

React高阶组件HOC配置

原始写法

改写：

更改config-override.js配置代码为：

重启项目

改写为：在HOC类上添加 @withLearnReact

React高阶组件HOC配置相关推荐

最新文章

热门文章