لماذا يجب استخدام super(props) في مكونات React؟
في React، عند استخدام مكون من نوع class (كما في المثال الذي قدمته)، يجب عليك استدعاء super(props)
داخل الconstructor قبل أي تعليمات أخرى. هذا لأنه في JavaScript، لا يمكنك استخدام this
في الconstructor قبل استدعاء super(props)
.
super(props)
تقوم بتمرير props
إلى ال constructor الخاص بال class الأساسية (الموروثة). في حالتك، يتم تمرير props
إلى constructor ال class الأساسية لـ React.Component، وهذا يعني أنه يجب عليك تمرير props
إلى الconstructor الخاص بـ React.Component.
-
كيفية إنشاء مفاتيح فريدة في React29/03/2024
-
استخدام متغيرات البيئة في React06/03/2024
-
React: تفاعل وأداء في تطوير الويب23/01/2024
بعد استدعاء super(props)
، يمكنك استخدام this.props
بشكل طبيعي في constructor للقيام بأي شيء تحتاجه، مثل تهيئة state أو تعيين الدوال.
باختصار، super(props)
في هذا السياق يضمن أن this.props
ستكون متاحة داخل constructor، وهذا يسمح لك بالوصول إلى الـprops الذي تم تمريره إلى المكون.
المزيد من المعلومات
بالتأكيد، هنا بعض المعلومات الإضافية حول استخدام super(props)
في مكونات React من نوع class:
-
ضرورة استخدام
super(props)
: في React، يجب عليك دائمًا استدعاءsuper(props)
في constructor عند استخدام class components. إذا كنت لا تستخدمsuper(props)
، فلن تتمكن من الوصول إلىthis.props
داخل constructor وستحصل على خطأ. -
تمرير الـprops إلى الـconstructor الأساسي:
super(props)
يمررprops
إلى constructor ال class الأساسية (الموروثة)، وهذا يسمح لل class الفرعية (التي تكتبها) بالوصول إلىprops
واستخدامها. -
دور
super()
بدونprops
: إذا لم تكن تحتاج إلى استخدامprops
داخل constructor، يمكنك استدعاءsuper()
بدون تمريرprops
. على سبيل المثال، عند استخدام constructor فارغ. -
تأكد من استخدام
super(props)
فقط في constructor: لا يمكنك استدعاءsuper(props)
في أي مكان آخر غير constructor. يجب أن يكون هذا الاستدعاء الأول في constructor. -
دعم الـprops في الدوال الأخرى: بعد استدعاء
super(props)
، يمكنك استخدامthis.props
في أي مكان آخر داخل class component، بما في ذلك الدوال الأخرى مثلrender()
وcomponentDidMount()
.
استخدام super(props)
يعتبر جزءًا أساسيًا من كتابة مكونات React من نوع class، ويضمن توافق this.props
داخل constructor مع ال props الممررة إلى المكون.