هل المكون بدون رأس هو ببساطة مكون غير مرتب، أم أن هناك المزيد منه؟

يقوم الويب بالفعل بفصل النمط عن المحتوى من خلال طلب تحديد الأنماط
في CSS بدلا من HTML. تسمح هذه البنية لكل صفحة ويب باعتماد
عالميًا معيار التصميم دون تحديد أي أنماط خاصة بالصفحة.

مع تطور الويب إلى منصة للتطبيقات، سعى المطورون إلى إيجاد طرق لإنشاء
قواعد التعليمات البرمجية المتنامية الخاصة بهم أكثر قابلية للصيانة. في الوقت الحاضر، الإستراتيجية الفعلية لـ
تنظيم كود التطبيق هو تحديد مكونات صغيرة وخفيفة الوزن يمكنها
تتألف معا. وبذلك أصبح المكون هو وحدة التركيب في
تطوير الويب الحديث.

غالبًا ما تحدد المكونات كلاً من HTML وCSS الخاصة بها لصالح التغليف.
في حين أن هذا يجعلها أسهل في التأليف، إلا أنها قد تكون أكثر صعوبة
دمجها في نظام التصميم الحالي بشكل متماسك. هذا صحيح بشكل خاص
لمكونات الطرف الثالث التي يتم استيرادها من موردين خارجيين.

تحل المكونات مقطوعة الرأس هذا التحدي من خلال إعادة تقديم الفصل بين
المحتوى والأسلوب. ولكن الآن أصبح الفصل على طول حدود المكون كـ
يتعارض بين HTML وCSS. إنهم المفتاح لإنشاء مكون رائع بدون رأس
يكمن في تصميم واجهة المكون بحيث يستطيع المطور
يطبقون أساليبهم الخاصة بوضوح وسهولة.

إعادة توجيه الدعائم ذات الصلة

بالمعنى الأساسي، المكون بدون رأس هو ببساطة مكون غير مرتب.
يجب أن يكون المطورون قادرين على تطبيق CSS الخاص بهم على عناصر HTML التي يستخدمها
يحدد المكون.

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

إذا كان المكون الخاص بك له نفس دلالات عنصر HTML الأصلي، فيمكنك استخدام
اكتب ComponentProps من React للتأكد من أن جميع الدعائم ذات الصلة
قابل لإعادة التوجيه. تذكر حذف أي دعائم لا تريد أن يستخدمها المستخدم
المكون الخاص بك ليكون قادرًا على التجاوز.

import { type ComponentProps } from 'react'

function SubmitButton({ ...props }: Omit, 'type'>) {
  return 
}

توفير فئات محددة مسبقا

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

إحدى الإستراتيجيات لدعم ذلك هي الاعتماد على
أدوات دمج CSS.
على سبيل المثال، قد يتم تصميم مكون المعرض بدون رأس على النحو التالي:

/* Root container */
.gallery {
}

/* Gallery items container */
.gallery > ul {
}

/* Gallery item */
.gallery > ul > li {
}

/* Next and Previous buttons */
.gallery button {
}

لكن هذا الأسلوب يخلق مشكلة كبيرة لأن بنية HTML الداخلية لـ
أصبحت الآن المكون جزء من API العامة الخاصة به. هذا يمنعك من تعديل
قم بالهيكلة لاحقًا دون احتمال كسر التعليمات البرمجية النهائية.

الإستراتيجية الأفضل هي التحديد المسبق للفئات لكل عنصر فرعي رئيسي. من هنا
يمكن للمطورين استخدام محددات الفئة دون الاعتماد على أي HTML معين
بناء:

.xyz-gallery {
}

.xyz-gallery-next-button {
}

.xyz-gallery-previous-button {
}

.xyz-gallery-items-container {
}

.xyz-gallery-item {
}

تذكر أن تبدأ فصولك الدراسية حتى لا تتعارض مع
أنماط المطور الخاصة.

دعم التخطيطات المخصصة

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

قد لا يهم هذا. بعد كل شيء، يعد HTML العادي مرنًا جدًا في كيفية استخدامه
يمكن تقديمها. لكن في بعض الأحيان يصل المطورون إلى HTML إضافي بالترتيب
لإنجاز تصاميم معينة. إذا قمت بعرض الكود المصدري لأي
تقريبًا موقع الويب، يمكنك أن تتوقع رؤية عدد كبير من عناصر

يمكنك دعم حالات الاستخدام هذه عن طريق تقسيم المكون مقطوع الرأس إلى
مكونات متعددة ذات صلة. بهذه الطريقة يتمتع المطورون بحرية إضافة
الخاصة بهم عناصر التخطيط للمكون. على سبيل المثال، يمكن للمطور تضمين التالي و
الأزرار السابقة من مثال المعرض داخل حاوية flexbox مخصصة:

    {data.map((item) => (
      {item.content}
    ))}
  

    

.gallery-items-container {
}

.gallery-buttons-container {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

يتم تنفيذ هذه الأنواع من المكونات عادةً باستخدام
سياق لتمرير
البيانات فيما بينهم. أنها تتطلب المزيد من العمل لتصميم وتنفيذ و
وثيقة. ومع ذلك، فإن تنوعها الناتج غالبًا ما يعني بذل جهد إضافي
يستحق كل هذا العناء.

السماح بتجاوز المكونات

يتطلب عدد صغير من حالات الاستخدام أن يقوم مكون بدون رأس بإدارة التخطيط
من مكوناته الفرعية. قد يكون أحد الأمثلة على ذلك طريقة عرض شجرة هرمية
يسمح بإعادة ترتيب عناصره عبر السحب والإسقاط. قد تكون حالة الاستخدام الأخرى هي
السماح لتطبيقات الصفحة الواحدة باستبدال عنصر الربط الافتراضي بـ
مكون الارتباط المخصص الذي يسهل التوجيه من جانب العميل.

تتمثل الإستراتيجية المتقدمة للسماح للمطورين بتحديد التخطيطات المخصصة في
السماح بتجاوز المكون الفرعي الفعلي الذي يتم عرضه عبر الدعائم:

  }}
/>

يمنح هذا المطور السيطرة الكاملة على ما يتم تقديمه في كل طفل
المكون، مع السماح للمكون مقطوع الرأس بإدارة إجماليه
بناء.

يمكنك أيضًا السماح للمطورين بتخصيص العنصر الجذر للمكون الخاص بك
عبر الدعامة. على سبيل المثال، يسمح مكون الزر هذا للمطور بعرضه
كشيء آخر:

import { type ElementType } from 'react'

function HeadlessButton({ as, ...props }: { as?: ElementType }) {
  const Component = as ?? 'button'
  return 
}

على سبيل المثال، لكي تتعامل التكنولوجيا المساعدة مع الزر كرابط،
يمكن للمطور تحديد أنه يجب استخدام عنصر الربط لعرض
زر:

Actually a link

ملخص

المكونات مقطوعة الرأس هي أكثر بكثير من مجرد مكونات لا تحتوي على أي منها
الأنماط. المكونات الرائعة بدون رأس قابلة للتوسيع بالكامل وتسمح للمطور
لتخصيص بنية HTML الداخلية بالكامل.