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本身：

import React from 'react';

const withOnScreenMonitor = WrappedComponent => {
    return class OnScreenMonitor extends React.Component {
        render(){
            return (
                <WrappedComponent/>
            )
        }
    }
};

export default withOnScreenMonitor;

这是我在其中一种视图中使用它的方式：

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

我一直收到此错误。我在设置此HOC的过程中是否缺少某些东西？

Answer 1

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

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

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

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

1 个答案: