تقسيم النماذج إلى أجزاء أصغر باستخدام withForm HOC (Breaking Forms into Smaller Pieces with withForm HOC)

الدرس 20 من 21 · دورة TanStack Form الكاملة · 4 دقيقة و38 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع شيفرة هذا الدرس

الفرع: withForm

[00:01] بمقدورنا أن نجعل نموذجنا أصغر بكثير وأكثر قابلية للإدارة. غير أنّه يمكننا مع ذلك أن نتحسّن أكثر. فإذًا يزوّدنا TanStack Form بوسيلةٍ لتقسيم نموذجنا إلى قطعٍ أصغر. فتذكّر إذًا أنه عندما عرّفنا — اه اه — هنا في form.tsx عندما أنشأنا

[00:18] خُطّافاتنا باستخدام createFormHook، فقد حصلنا على useAppForm الذي استخدمناه، غير أنّه حصلنا أيضًا على هذه الدالة withForm هنا، وهي مكوّن من رتبة أعلى (higher-order component).

[00:29] فإذا لم تكن معتادًا عليها، فمكوّن رتبة أعلى في React هو مكوّنٌ يمكنك أن تلُفّ مكوّنًا آخرَ به، وهو سيوفّر للمكوّنَ الذي يُلفّ خصائص (props) إضافية. ويمكننا استخدام هذا لإنشاء أقسامٍ فرعية من

[00:42] نموذجنا. فلننقل بعض الأقسام في نموذجنا إلى مكوّناتٍ منفصلة. فلنُلفّ هذه المكوّنات بـ withForm، وبفعلنا ذلك، بدلًا من أن تبقى هذه المكوّنات الفرعية أو هذه الأقسام الفرعية هكذا، سيكون لدينا أيضًا إمكانية الوصول إلى نموذجنا. فلنرَ

[00:55] كيف يمكننا فعل ذلك. فمثلًا، اه، في نموذجنا يأخذ هذا الجزء الخاص بالمهارات (skills) مساحةً كبيرة. هذا حقلُ المهارات هنا حيث نمرّ في حلقةٍ على مهاراتنا ثم نعرض هذه بوصفها قائمة منسدلة (dropdown) من أجل تغيير المهارة وهلمّ جرا. إنّه

[01:12] يأخذ مساحةً كبيرة. ويمكننا نقل هذا — ربما — إلى ملفٍ منفصل ثم استيراد هذا الملف هنا. فلنرَ إذًا كيف يمكننا فعل ذلك باستخدام مكوّن رتبة أعلى withForm. فلنفعل ذلك إذًا في هنا، اه، داخل مجلد نموذج التسجيل (register form) لدينا

[01:26] فلنُنشئ مكوّنًا جديدًا لجزئنا الخاص بالمهارات. فلنسمّه RegisterSkills ربما، أو ما شابه.

[01:34] والآن في هنا سنصدّر مكوّنًا جديدًا. غير أنّه المكوّن الذي سنصدّره سيكون مُغلَّفًا بـ withForm — اه. ففلنصدّر مكوّنًا جديدًا. فلنقل RegisterSkills. وفي هنا إنّنا

[01:48] سنستورد withForm من مجلد الخُطّافات (hooks) لدينا، ثم نعرّف مكوّننا هنا هكذا. وما يلزمنا فعله هو أنّه سيلزمنا أولًا تمرير خيارات النموذج (formOptions) لدينا. فتذكّر أنّه في مجلدنا أنشأنا هذا المجلد المشترك (shared) الذي يتضمّن

[02:04] خيارات النموذج التي نصدرها من هنا. وسيلزمنا تمرير هذه، اه، إلى مكوّن رتبة أعلى withForm لدينا كذلك أيضًا. فما يمكننا فعله إذًا أنّه يمكننا ببساطة أن ننشر (spread) كلَّ ما لدينا في registerFormOpts هكذا. ومن ثمّ

[02:20] نمرّر دالةَ تصيير (render function) كي نصيّر مكوّننا. وفي دالة التصيير هذه سنمتلك إمكانية الوصول إلى نموذجنا في هنا.

[02:29] وبامتلاكنا إمكانية الوصول إلى نموذجنا، اه، سنكون قادرين على عرض حقولنا وهلمّ جرا. ففي هنا، اه، فلنضع return. وما يلزمنا إعادته هو ببساطة — اه — عذرًا، إنّه ينبغي أن يُستورد هذا استيرادًا عاديًّا، لا بوصفه نوعًا (type).

[02:45] وما يلزمنا إعادته هنا هو: لنعد إلى نموذجنا وسيلزمنا نسخ هذا الجزء، هذا حقلُ المهارات. فلنقتطعه من هنا ولنلصقه هنا هكذا. والآن، اه، سنمتلك إمكانية الوصول إلى نموذجنا هنا. فالجواب لا

[03:01] أيّ مشكلةٍ في الوصول إلى form.AppField. وكذلك، بما أنّنا نمرّر خيارات نموذجنا هنا، فسنحصل على أمان النوع (type safety). اه — لدينا أمورنا محدَّدة هنا، قيمنا الافتراضية (default values) وهلمّ جرا. غير أنّه

[03:14] سيلزمنا فقط استيراد هذه المكوّنات، اه. فنحتاج إلى FieldSet وFieldLegend — أو نحتاج إلى وصفنا (description) وFieldGroup لدينا — وأيضًا button لدينا، واه — هذا يكون هو فقط. فأصبح لدينا مكوّننا هنا، والآن يمكننا فقط أن

[03:33] نستخدمه ببساطة في هنا. وطريقة فعل ذلك هي فقط، اه، استيراد مكوّننا.

[03:38] غير أنّه سيلزمنا أيضًا أن نمرّر له نموذجنا. فلنستورد في هنا RegisterSkills لدينا، وسيلزمنا فقط، اه، أن نمرّر له نموذجنا هكذا. ونموذجنا هو بالطبع ما

[03:53] نحصل عليه في هنا من useAppForm.

[03:57] وبفعلنا ذلك فلنحفظ الآن. فلنُحدّث. فمن المفترض أن يظل كل شيء يعمل تمامًا كما هو نفسه. غير أنّه لدينا الآن ملفٌ أنظف هنا، وقد قسّمنا نموذجنا إلى أجزاء أصغر، ويمكننا أن نفعل ذلك مع

[04:13] أشياء أخرى أيضًا. فتذكّر على سبيل المثال أنّه في نموذجنا، اه، لم نضع الحقول الخاصة بهذه، ولكن في العنوان لدينا على سبيل المثال يمكن أن يكون لدينا، بالإضافة إلى — اه، في هنا يمكن أن يكون لدينا، بالإضافة إلى street، لدينا city وstate وzipCode وهلمّ جرا — يمكننا

[04:29] ربما أن نضع كل هذه الحقول، اه، في مكوّنٍ منفصل ثم نستورده في نموذجنا، حتى نحصل ببساطة على تنظيمٍ أفضل لنموذجنا باستخدام