اذهب إلى المحتوى
  • 0

ممكن شرح هذا الكود .. ريأكت

Ahmed Sawy

السؤال

Recommended Posts

  • 1

تحياتي

في السطر الأول:

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 ليمكن إستدعائه في الملفات الأخرى.

بالتوفيق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...