React高阶组件HOC配置

原始写法

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.org

sudo npm install --save-dev @babel/plugin-proposal-decorators

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

const { override, fixBabelImports, addBabelPlugins } = require("customize-cra");
module.exports = override(
  //antd
  fixBabelImports("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;