مكوّنات العرض القابلة لإعادة الاستخدام

الهدف: ابنِ أجزاءً من الواجهة تعتمد على props، بحيث يسهل إعادة استخدامها وتركيبها.

• واجهة واضحة لـ props
• مرئيات بلا حالة
• إتاحة تجاوزات التنسيق

المبادئ:

• اقرأ props ولا تعدّلها.
• لا توجد آثار جانبية؛ التصيير فقط.
• أتح className/style للتخصيص.

اجعل أسماء props واضحة؛ وقدّم قيمًا افتراضية آمنة؛ وفضّل القيم المنطقية البسيطة مثل primary أو disabled للأنماط المختلفة.

مثال: مكوّنات Button وBadge وCard صغيرة تقبل props وتجاوزات الأصناف.

نصائح:

• اقبل children للمحتوى المرن.
• أتح className/style لإجراء التعديلات.
• أبقِ الأنماط المختلفة محدودة (مثل primary).

تجنب:

• تعديل props داخل المكوّنات.
• التغييرات الخفية في الحالة العامة.
• تثبيت التنسيقات دون توفير منفذ للتخصيص.

مراجعة: ابنِ مكوّنات صغيرة معتمدة على props بقيم افتراضية آمنة، واقبل children وclassName، وتجنب الآثار الجانبية لتسهيل إعادة استخدامها.