رد فعل مكون النظام الأعلى لا يعرض المكون الذي تم تمريره

2

أنا أكتب 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؟

1 إجابة

4
افضل جواب

يحتاج 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>  
  )
}
:مؤلف
فوق
قائمة طعام