React Native / الأوصاف الأصلية والتفاعل المحلي / الدرس 2

المكونات والخصائص وحدود النص

عرّف مدخلات المكوّن للقراءة فقط، واجعل ملكية النص الأصلية واضحة أثناء التركيب والعرض الشرطي.

وقت القراءة التقريبي: 5 دقيقةتاريخ مراجعة المحتوى 2026-10-28

في هذه الصفحة

أهداف الدرس

ينبغي لواجهة المكوّن تسمية المعنى والملكية
امنح النصوص المرئية مالكا من نوع Text
ركّب المحتوى دون إخفاء شروط عرضه

ينبغي لواجهة المكوّن تسمية المعنى والملكية

تنقل الخصائص props مدخلات من الأب إلى المكوّن لعرض معين. عاملها للقراءة فقط، بما في ذلك الكائنات والمصفوفات التي تشير إليها الخاصية. يوضح seatsAvailable أكثر مما يوضحه value، ويجعل amountCents الوحدة ظاهرة. أبق التحقق من البيانات عند حد المصدر المناسب، بدلا من ترك كل غلاف مرئي يعيد تفسير القيم المفقودة بطريقة مختلفة. يستطيع المكوّن اشتقاق العرض من مدخل مقبول دون ملكية سجل العمل. يفيد التركيب عندما يسمي مسؤولية أو منطقة دلالية قابلة لإعادة الاستخدام، لا لمجرد تقسيم ملف كبير إلى أغلفة كثيرة غير معبرة.

امنح النصوص المرئية مالكا من نوع Text

تعرض الوحدة الأولى ملخص ورشة بعنصري Text مستقلين داخل View. لا تسمح React Native بعقد نص اعتباطية مباشرة تحت View كما لو كانت div في HTML. يستطيع Text المتداخل تمثيل أجزاء نصية ضمن السطر، بينما يشارك View المتداخل في التخطيط الأصلي. لا تفترض انتقال تنسيق الخط إلى كل أبناء العروض كما في CSS المتصفح. حدّد تنسيق النص على عناصر Text المالكة له أو في مكوّن طباعة قابل لإعادة الاستخدام عن قصد. يصف المحتوى المتوقع في سطرين ترتيب المصدر فقط؛ ويحتاج الالتفاف ومقاييس الخط وتجميع الإتاحة إلى ملاحظة الهدف.

jsx وحدة توضيحية من React Native؛ تتطلب بيئة التطبيق المتوافقة المبيّنة.

import {View, Text} from 'react-native';
function WorkshopSummary({title, seatsAvailable}) {
  return <View><Text>{title}</Text><Text>Seats: {seatsAvailable}</Text></View>;
}
export default function App() {
  return <WorkshopSummary title="Maps" seatsAvailable={4} />;
}

الناتج المتوقع

Maps
Seats: 4

يملك الأب عدد المقاعد المقبول. ويصف الابن النص دون تعديل العدد أو اختراع عملية حجز.

ركّب المحتوى دون إخفاء شروط عرضه

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

jsx وحدة توضيحية من React Native؛ تتطلب بيئة التطبيق المتوافقة المبيّنة.

import {View, Text} from 'react-native';
function Panel({children}) { return <View>{children}</View>; }
export default function App() {
  const count = 0;
  return <View>
    <Panel><Text>Materials</Text></Panel>
    {count > 0 ? <Text>New: {count}</Text> : null}
  </View>;
}

الناتج المتوقع

Materials

يعيد الشرط الصريح null عند count0، فلا يبقى سوى نص اللوحة. وتظل JSX وبيئتها الأصلية غير منفذتين.

افصل القيم الافتراضية من التحقق وقت التشغيل

تطبق القيمة الافتراضية للوسيط عندما تكون الخاصية undefined، وليس عندما تكون null صراحة. قرّر هل تُقبل أي من الحالتين، وهل يحمل النص الفارغ معنى آخر. تستطيع TypeScript وصف عقود المكونات، لكنها لا تتحقق وقت التشغيل من حمولة خادم غير موثوقة. طبّع وتحقق مرة واحدة قبل وصول السجلات المقبولة إلى العرض. لا تحول كل عدد مفقود إلى صفر؛ فصفر مقاعد متاحة يختلف عن توافر مجهول. وإذا احتاج الابن إلى طلب تغيير، فقدم رد نداء بحمولة موثقة، بدلا من تعديل كائن الأب عبر مرجع مشترك.

راجع العقد مع الحالات القصوى للمحتوى

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

الأخطاء الشائعة وإصلاحها

ظهور نص مباشرة تحت View

لماذا يحدث؟: عبر افتراض عقد النص في المتصفح حد النص الأصلي.
كيف تصلحه؟: ضع النص المرئي داخل مكوّن Text مناسب.
كيف تتجنب تكراره؟: راجع الشروط لاحتمال إنتاج نص عددي عرضي.

عدم استبدال القيمة الافتراضية لـ null

لماذا يحدث؟: تعالج الوسائط الافتراضية undefined لا null الصريحة.
كيف تصلحه؟: نمذج null أو طبّعها وفقا لعقد المدخل المقبول.
كيف تتجنب تكراره؟: اختبر الحذف وundefined وnull والفراغ بصورة منفصلة.

تغيير الابن البيانات دون أمر من الأب

لماذا يحدث؟: عدّل الابن كائن خاصية مشتركا.
كيف تصلحه؟: أبق الخصائص للقراءة واطلب التغيير برد نداء موثق.
كيف تتجنب تكراره؟: اجعل الملكية واضحة في واجهات المكونات.

اختبر فهمك

1. لماذا تختلف seatsAvailable=0 عن غياب الخاصية seatsAvailable؟

اعرض الحل المشروح

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

2. كيف ينبغي لملخص قابل لإعادة الاستخدام طلب اختيار ورشته؟