代码之家 › 专栏 › 技术社区 › Kobby

响应高阶组件未呈现传递的组件

higher-order-components reactjs html javascript

Kobby · 技术社区 · 6 年前

我正在编写一个hoc-in-react来处理一些滚动功能的繁重提升。我很难让组件进行渲染。我一直收到这个错误:

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时是否遗漏了一些东西?

1 回复 | 直到 6 年前

Shubham Khatri 6 年前

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

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前