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

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

  •  2
  • 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 年前
        1
  •  4
  •   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>  
      )
    }