高阶组件的使用方式

// 第一种高阶组件的方式 它是返回一个构造函数
const MyContainerHOC = (WrappedComponent, options) => class extends React.Component {
    render(){
        return <WrappedComponent {...options} {...this.props} />;
    }
}
// 第一种高阶组件的方式 它是返回一个React.element对象
const MyContainer = (WrappedComponent, options, index) => <WrappedComponent key={index} {...options} />;
class Demo extends React.Component {
    render() {
        return(<div>111</div>);
    }
}
// 请注意第一种高阶组件的方式是返回一个构造函数
const ComponentDom = MyContainerHOC(Demo, {});
class DemoContainer extends React.Component {
    render() {
        return(<div>
            { /*第一种方式*/ }
            <ComponentDom />
            { /*第二种方式*/ }
            {MyContainer(Demo, {})}
        </div>);
    }
}

转化为es5以后的代码

import "core-js/modules/es6.object.assign";
import "core-js/modules/es6.object.create";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
// 第一种高阶组件的方式 它是返回一个构造函数
var MyContainerHOC = function MyContainerHOC(WrappedComponent, options) {
  return (
    /*#__PURE__*/
    function (_React$Component) {
      _inheritsLoose(_class, _React$Component);
      function _class() {
        return _React$Component.apply(this, arguments) || this;
      }
      var _proto = _class.prototype;
      _proto.render = function render() {
        return React.createElement(WrappedComponent, _extends({}, options, this.props));
      };
      return _class;
    }(React.Component)
  );
}; // 第一种高阶组件的方式 它是返回一个React.element对象
var MyContainer = function MyContainer(WrappedComponent, options, index) {
  return React.createElement(WrappedComponent, _extends({
    key: index
  }, options));
};
var Demo =
/*#__PURE__*/
function (_React$Component2) {
  _inheritsLoose(Demo, _React$Component2);
  function Demo() {
    return _React$Component2.apply(this, arguments) || this;
  }
  var _proto2 = Demo.prototype;
  _proto2.render = function render() {
    return React.createElement("div", null, "111");
  };
  return Demo;
}(React.Component); // 请注意第一种高阶组件的方式是返回一个构造函数
var ComponentDom = MyContainerHOC(Demo, {});
var DemoContainer =
/*#__PURE__*/
function (_React$Component3) {
  _inheritsLoose(DemoContainer, _React$Component3);
  function DemoContainer() {
    return _React$Component3.apply(this, arguments) || this;
  }
  var _proto3 = DemoContainer.prototype;
  _proto3.render = function render() {
    return React.createElement("div", null, React.createElement(ComponentDom, null), MyContainer(Demo, {}));
  };
  return DemoContainer;
}(React.Component);