出了点问题！元素类型无效：应为字符串（用于内置组件）或 HOC 的类/函数答案

【问题标题】：Something went wrong!Element type is invalid: expected a string (for built-in components) or a class/function For HOC出了点问题！元素类型无效：应为字符串（用于内置组件）或 HOC 的类/函数
【发布时间】：2020-08-06 10:32:02
【问题描述】：

import React, { useState } from 'react';
import CreateProject from './CreateProjectWithName';

function Enhanced(WrappedComponent) {
  // ...and returns another component...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: []
      };
    }


    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}
const Wrapper = (props) => {
  const Comp = Enhanced(<CreateProject />);
  return (
    <div>

      <Comp />

      <div>
        {/* <button onClick={() => updateView()} /> */}
      </div>
    </div>
  );
};

这个代码块是行不通的。我究竟做错了什么？我错过了 React 的哪个主要基础？渲染 HOC 的正确方法是什么？

【问题讨论】：

const Comp = Enhanced(CreateProject);

标签： javascript reactjs higher-order-components

【解决方案1】：

HOC 接收一个组件引用，当您使用它时，它是一个实例

const Comp = Enhanced(<CreateProject />);

正确的方法是

const Comp = Enhanced(CreateProject);

另外，出于性能原因和生命周期的正确执行，您必须在组件之外创建一个带有 HOC 的包装组件

const Comp = Enhanced(CreateProject);
const Wrapper = (props) => {

  return (
    <div>

      <Comp />

      <div>
        {/* <button onClick={() => updateView()} /> */}
      </div>
    </div>
  );
};

【讨论】：

【解决方案2】：

function Enhanced(WrappedComponent) {
  // ...and returns another component...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: []
      };
    }


    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}
const Wrapper = (props) => {
  const Comp = Enhanced(CreateProject );
  return (
    <div>

      <Comp />

      <div>
        {/* <button onClick={() => updateView()} /> */}
      </div>
    </div>
  );
};

【讨论】：