ملف template.js

ملف القالب (template) يشبه التخطيط (layout) من حيث أنه يلف التخطيط أو الصفحة. على عكس التخطيطات التي تظل ثابتة عبر المسارات وتحافظ على الحالة، فإن القوالب تحصل على مفتاح فريد، مما يعني أن مكونات العميل (Client Components) التابعة لها تعيد تعيين حالتها عند التنقل.

هي مفيدة عندما تحتاج إلى:

• إعادة مزامنة useEffect عند التنقل.
• إعادة تعيين حالة مكونات العميل التابعة عند التنقل. على سبيل المثال، حقل إدخال.
• تغيير السلوك الافتراضي للإطار. على سبيل المثال، حدود Suspense داخل التخطيطات تظهر حالة الانتظار فقط عند التحميل الأول، بينما القوالب تظهرها في كل عملية تنقل.

الاصطلاح

يمكن تعريف القالب عن طريق تصدير مكون React افتراضي من ملف template.js. يجب أن يقبل المكون خاصية children.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

export default function Template({ children }) {
  return <div>{children}</div>
}

من حيث التداخل، يتم عرض template.js بين التخطيط وأطفاله. إليك المخرجات المبسطة:

<Layout>
  {/* لاحظ أن القالب يحصل على مفتاح فريد. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

الخصائص

children (مطلوبة)

يقبل القالب خاصية children.

<Layout>
  {/* لاحظ أن القالب يحصل تلقائيًا على مفتاح فريد. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

السلوك

• مكونات الخادم (Server Components): بشكل افتراضي، القوالب هي مكونات خادم.
• إعادة التركيب عند التنقل: تحصل القوالب على مفتاح فريد تلقائيًا. التنقل إلى مسار جديد يتسبب في إعادة تركيب القالب وأطفاله.
• إعادة تعيين الحالة: أي مكون عميل داخل القالب سيعيد تعيين حالته عند التنقل.
• إعادة تشغيل التأثير (Effect): التأثيرات مثل useEffect ستتم مزامنتها مرة أخرى عند إعادة تركيب المكون.
• إعادة إنشاء DOM: يتم إعادة إنشاء عناصر DOM داخل القالب بالكامل.

سجل الإصدارات