1 مصطفى القباني نشر 9 سبتمبر 2020 أرسل تقرير نشر 9 سبتمبر 2020 تحياتي في السطر الأول: function AppFormField({name, ...otherProps}){ تم تعريف functional component وهو أحد نوعين من الcomponents في ريأكت، ويستخدم الfunctional component إذا لن يحتوي الcomponent على state. ويتم إنشاء الcomponent بتمرير الخواص name و otherProps مع إستخدام الspread operator. في السطر التالي: const { setFieldTouched, handleChange, errors, touched} = useFormikContext() تم إستدعاء الدالة useFormikContext() (هي في الواقع hook) وتم عمل object destructuring للobject الذي تم إرجاعه من هذا الfunction. لفهم الobject destructuring ، إذا كان لديك الobject الآتي: let x ={ a: 1, b :2, c :'hello', } فيمكن إستقبال ما تم تعريفه داخل الobject هكذا: let {a,b,c} = x وهو ما تم عمله في الكود الخاص بحضرتك. بعد ذلك: return ( <> <AppTextInput onBlur={() => setFieldTouched(name)} onChangeText={handleChange(name)} {...otherProps} /> <ErrorMessage error={errors[name]} visible={touched[name]} /> </> ); export default AppFormField; بعد ذلك تم تعريف دالة الrender، وتقوم بإرجاع : AppTextInput و ErrorMessage وتم إحطاتهم بreact fragment. الcomponent الأول تم إنشائه بالprops onBlur وonChangeText وهما ما إستقبالهم بعمل object destructuring بالأعلى. بعد ذلك تم عمل export للcomponent ليمكن إستدعائه في الملفات الأخرى. بالتوفيق. اقتباس
السؤال
Ahmed Sawy
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.