反应高阶组件不渲染传递的组件

Question

我正在写一个 HOC 来反应来处理一些滚动功能的繁重工作。我很难让组件渲染。我不断收到此错误：

warning.js?d9a2:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

我将其精简为 HOC 的最基本部分，但仍然收到此错误。这是我的代码：

这是 HOC 本身：

warning.js?d9a2:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

这就是我在我的观点之一中使用它的方式：

import React from 'react';

const withOnScreenMonitor = WrappedComponent => {
    return class OnScreenMonitor extends React.Component {
        render(){
            return (
                <WrappedComponent/>
            )
        }
    }
};

export default withOnScreenMonitor;

我不断收到此错误。我在设置这个 HOC 的过程中是否遗漏了一些东西？

Answer 1

您的 HOC 需要一个组件来渲染，而不是 JSX 元素。此外，您还必须从渲染方法中取出静态内容。您可以简单地创建一个功能组件并像这样使用它

import withOnScreenMonitor from "../global-elements/OnScreenMonitor";
const ComponentWithOnScreenMonitor = withOnScreenMonitor(() => <div>test</div>);
render(){
  //// other code

  return (
    <Fragment>
      <div>
      /// other components
      </div>
      <ComponentWithOnScreenMonitor/>
    </Fragment>  
  )
}