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

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

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

React Higher Order Component not rendering passed component

html

javascript

reactjs

higher-order-components