React / المكونات والحالة / الدرس 2
JSX والتعبيرات ومدخلات المكونات
حول بنية الواجهة إلى JSX وحدد props توضح سلوك المكون.
في هذه الصفحة
أهداف الدرس
- JSX صياغة مصدر لا نص HTML
- عرض النصوص بأمان
- فحص الواجهات عند الحدود
JSX صياغة مصدر لا نص HTML
تدمج JSX أوصاف العناصر في مصدر JavaScript وتحولها أداة البناء، وليست نص HTML عاديا يحلل وقت التشغيل. أغلق الوسوم وأعد تعبيرا محيطا أو Fragment واستخدم className وhtmlFor. تضيف الأقواس تعبيرا لا كتلة تعليمات عشوائية. سم الحسابات الوسيطة بدلا من شروط متداخلة كثيرة. ويبقى وجوب صحة علاقات HTML؛ فلا تثبت الترجمة صلاحية كل تداخل.
props مدخلات للقراءة
يمرر الأب props ويقرأها المكون لذلك العرض. يوضح التفكيك العقد وتغطي القيمة الافتراضية الغياب أو undefined لا null المقصودة. لا تعدل كائن المدخل لتصحيحه في الابن؛ تحقق أو وحد عند الحد المناسب وأبلغ التغيير برد نداء للأب. صف المعنى والوحدة؛ فعدد المقاعد والسنتات أعداد لكنهما عقدان مختلفان.
عرض النصوص بأمان
يضع المثال الاسم في تعبير عنوان فتعامل React DOM السلسلة نصا لا HTML. يفيد ذلك ولا يضمن أمان التطبيق كله؛ تحتاج العناوين وHTML الخام والتفويض تحققا. لا تستخدم HTML خاما لمجرد وجود أقواس زاوية، بل مكونات للتنسيق المدعوم. الناتج نص عادي ولا يحتاج المكون معرفة مصدر الاسم المصطنع.
function Greeting({ name = "Guest" }) { return <h1>Hello, {name}</h1>; }
export default function App() { return <main><Greeting name="Mira" /></main>; }
Hello, Miraتصبح الخاصية ابنا نصيا ولا تستخدم القيمة الافتراضية هنا.
children لمواضع التركيب
تتيح children محتوى متداخلا دون معرفة الغلاف بكل بنية. يحدد المثال لوحة بعنوان وموضع محتوى، ولا يبيح ذلك تعديل الأبناء أو استنباط قواعد خفية منهم. احفظ ملاءمة دلالة الغلاف ولا تفرض مرتبة عنوان لكل سياق بلا عقد. يمكن قبول اختيار صريح عند الحاجة. فضل عقدا صغيرا على أعلام كثيرة تغير تراكيب غير مترابطة.
function Panel({ title, children }) { return <section><h2>{title}</h2>{children}</section>; }
export default function App() { return <main><h1>Workshop</h1><Panel title="Materials"><p>Bring local notes.</p></Panel></main>; }
Workshop
Materials
Bring local notes.يملك الأب المحتوى ويملك الغلاف بنية قسم بسيطة.
فحص الواجهات عند الحدود
وضح المطلوب والافتراضي والأبناء وردود النداء. تساعد الأنواع والفحوص ولا تتحقق وحدها من بيانات خارجية. اختبر النص الفارغ والغياب وnull المسموحة والترجمات والالتفاف. تبقى htmlFor محتاجة معرفا مطابقا ولا ينشئ الغلاف معلما تلقائيا. افحص السلوك بعد الترجمة؛ يثبت البناء المعالجة لا صحة التواصل.
الأخطاء الشائعة وإصلاحها
لا يستبدل الافتراضي null
- لماذا يحدث؟
- ينطبق التفكيك الافتراضي على undefined.
- كيف تصلحه؟
- عالج null صراحة وفق العقد.
- كيف تتجنب تكراره؟
- اختبر الحالات منفصلة.
ترفض JSX تعليمة داخل الأقواس
- لماذا يحدث؟
- احتوى موضع التعبير تعليمة تحكم.
- كيف تصلحه؟
- احسب القيمة قبل الإرجاع.
- كيف تتجنب تكراره؟
- سم المنطق المعقد.
يغير الابن بيانات الأب
- لماذا يحدث؟
- عدل كائن props.
- كيف تصلحه؟
- اقرأ المدخل واطلب التغيير برد نداء.
- كيف تتجنب تكراره؟
- وثق الملكية والتحديث الثابت.
اختبر فهمك
1. صمم واجهة سعر تتجنب الأعداد المبهمة.
اعرض الحل المشروح
استخدم amountCents وعملة أو سياسة تنسيق صريحة وتحقق قبل العرض واحفظ القراءة فقط. يبهم value الوحدة وقد يفسد تعديلها الحالة المشتركة.
2. متى يقبل الغلاف children بدلا من إعداد نصي طويل؟
اعرض الحل المشروح
استخدمها حين يركب الأب المحتوى ولا يقدم الغلاف إلا حدا مستقرا. أبق props لما يحتاجه الغلاف كالعنوان، دون اختراع لغة ترميز مصغرة.
أهم ما تعلمته
- تنتج التعبيرات أوصافا لا HTML خاما.
- props مدخلات عرض للقراءة.
- يحتاج التركيب عقدا دلاليا.