مشكلة تصميم Higher Order Component في React Native

عمر سالم2 · 20 مارس 2021

كنت أعمل على كتابة Higher Order Component ليقوم بحقن حالة ديناميكية بداخل مكون معين:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const withState = state => Component => {
  return <Component {...state} />;
};

const Header = withState({
  mode: 'Dark'
})(({ mode }) => {
  return (
    <Text>Active Mode: {mode} Mode</Text>
  );
});

export default function App() {
  return (
    <View>
      <Header />
    </View>
  );
}

ولكن يظهر لي الخطأ التالي:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

إسلام عبدالعزيز · 20 مارس 2021

عند استخدام JSX، فعليك الانتابه ان المكون يجب ان يكون عبارة عن دالة. يريد React دائماً ان يحصل على المكونات في دالة او class، على حسب الاصدار الذي تستعمله. في الدالة withState، الراجع منها ليس دالة، بل انه كائن (object). كيف هذا؟ عند كتابة المكون في شكل JSX، يقوم Babel (المترجم) بعمل نداء لهذا المكون.

على سبيل المثال، اذا قمت بكتابة الدالة الآتيه:

function Button({ title }) {}

// عندما نستخدم المكون كـ JSX
// <Button title="Save" />
// هذا يساوي الآتي
// Button({ title: "Save" })

لذلك، بداخل الدالة withState، يجب ان يكون الراجع منها دالة، وهذه الدالة يكون الراجع منها هو المكون نفسه. فسيكون الحل هكذا:

const withState = state => Component => {
  return () => <Component {...state} />;
};

او يمكن كتابة الدالة بدون الـ Arrow Functions هكذا:

const withState = state => Component => {
	return function () {
		return <Component {...state} />;
	}
};

مشكلة تصميم Higher Order Component في React Native

السؤال

عمر سالم2

1 جواب على هذا السؤال

Recommended Posts

إسلام عبدالعزيز

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية