出现错误！元素类型无效:需要字符串(对于内置组件)或类/函数(对于HOC

Question

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的正确方法是什么？

Answer 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>
  );
};

Answer 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>
  );
};