ما هي مكونات الوالدين والطفل في رد الفعل

في الاستدعاءات المتبادلة بين مكونات التفاعل، يُسمى المتصل بالمكون الأصلي ويُسمى المستدعى بالمكون الفرعي. يمكن تمرير القيم بين المكونات الأصلية والفرعية: 1. عندما يقوم مكون أصلي بتمرير قيمة إلى مكون فرعي، يتم تمرير القيمة المراد تمريرها أولاً إلى المكون الفرعي، ثم في المكون الفرعي، يتم استخدام الدعائم تلقي القيمة التي تم تمريرها بواسطة المكون الأصلي؛ 2. المكون الفرعي عند تمرير القيم إلى المكون الأصلي، تحتاج إلى تمريرها إلى المكون الأصلي من خلال طريقة التشغيل.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows7، إصدار التفاعل 18، كمبيوتر Dell G3.

1. المكونات في رد الفعل

مكون التفاعل هو علامة غير HTML محددة ذاتيًا، ويشترط أن يكون الحرف الأول من مكون التفاعل مكتوبًا بالأحرف الكبيرة:

يقوم تطبيق class بتوسيع المكون {<App />

2. مكونات الوالدين والطفل

عندما تتصل المكونات ببعضها البعض، يُسمى المستدعي المكون الأصلي ويُسمى المستدعى المكون الفرعي:

استيراد رد فعل من 'رد فعل'؛ "); return( <div> up <Children /> </div> ) }}تصدير افتراضي لأعلى;استيراد React من 'react';class Children Extends React.Component{ buildor(props){ super(props); this. State = { } } render(){ return ( <div> Children </div> ) }}تصدير الأطفال الافتراضيين;

3. يقوم المكون الأصلي بتمرير القيمة إلى المكون الفرعي

تقوم المكونات الأصلية بتمرير القيم إلى المكونات الفرعية باستخدام الدعائم. عندما يقوم مكون أصلي بتمرير قيمة إلى مكون فرعي، يتم تمرير القيمة التي سيتم تمريرها أولاً إلى المكون الفرعي، ثم في المكون الفرعي، يتم استخدام الدعائم لتلقي القيمة التي تم تمريرها بواسطة المكون الأصلي.

يعرّف المكون الأصلي خاصية عند استدعاء المكون الفرعي:

<Children msg="يقوم المكون الأصلي بتمرير القيمة إلى المكون الفرعي" />

سيتم ربط رسالة القيمة هذه بسمة الدعائم للمكون الفرعي، ويمكن استخدام المكون الفرعي مباشرةً:

this.props.msg

يمكن للمكونات الأصلية تمرير القيم والأساليب إلى المكونات، ويمكنها حتى تمرير نفسها إلى المكونات الفرعية.

3.1 قيمة التمرير

استيراد رد فعل من 'رد فعل'؛ "); return( <div> up <Children msg="يمرر المكون الأصلي القيمة إلى المكون الفرعي" /> </div> ) }}تصدير افتراضي لأعلى;استيراد React من 'react';class Children يمتد React.Component{ مُنشئ (props){ super(props); this.state = { } } render(){ return ( <div> Children <br /> {this.props.msg} </div> ) }}تصدير الأطفال الافتراضيين;

3.2 طريقة الإرسال

استيراد رد فعل من 'رد فعل'؛ ("طريقة تشغيل المكون الأصلي")؛ } render(){ console.log("render"); return( <div> up <Children run={this.run} /> </div> ) }}تصدير افتراضي لأعلى ;استيراد رد فعل من 'رد فعل'; ){ return ( <div> الأطفال <br /> <button onClick={this.run}>Run</button> </div> ) }}تصدير الأطفال الافتراضيين;

3.3 تمرير المكون الأصلي إلى المكون الفرعي

استيراد رد فعل من 'رد فعل'؛ ("طريقة تشغيل المكون الأصلي")؛ } render(){ console.log("render"); return( <div> up <Children msg={this}/> </div> ) }}export default Up;import رد فعل من "رد فعل"؛ (){ return ( <div> الأطفال <br /> <button onClick={this.run}>Run</button> </div> ) }}تصدير الأطفال الافتراضيين;

4. يقوم المكون الفرعي بتمرير القيمة إلى المكون الأصلي

يقوم المكون الفرعي بتمرير القيمة إلى المكون الأصلي من خلال طريقة التشغيل.

import React from 'react';import children from './Children';class Up Extends React.Component { buildor(props){ super(props); this.state = { } } getChildrenData = (data) => { console.log. log(data); } render(){ console.log("render"); up <Children upFun={this.getChildrenData}/> </div> ) }}تصدير الرد الافتراضي لأعلى؛ استيراد التفاعل من 'رد'; > {this.props.upFun("بيانات المكون الفرعي")}}>تشغيل</button> </div> ) }}تصدير الأطفال الافتراضيين؛

5. الحصول على خصائص وطرق المكون الفرعي من خلال المراجع الموجودة في المكون الأصلي

استيراد رد فعل من 'رد فعل'؛ (this.refs.children); } render(){ console.log("render"); return( <div> up <Children ref="children" msg="test"/> <button onClick={this.clickButton }>انقر</button> </div> ) }}تصدير افتراضي لأعلى;``````jsimport React from 'react';class Children Extends React.Component{ buildor(props){ super(props); State = { title: "Subcomponent" } } runChildren = () => { } render(){ return ( <div> Children <br /> </div> ) }}export default Children;````