التصيير الشرطي

غالبًا ما تحتاج مكوناتك إلى عرض أشياء مختلفة بناءً على شروط مختلفة. في React، يمكنك تصيير JSX بشكل شرطي باستخدام صيغة JavaScript مثلifstatements، و&&، وعوامل التشغيل? :.

إرجاع JSX بشكل شرطي

لنفترض أن لديك مكونPackingListيقوم بتصيير عدة عناصرItem، والتي يمكن وضع علامة عليها بأنها معبأة أم لا:

لاحظ أن بعض مكوناتItemلديها خاصيةisPackedمضبوطة علىtrueبدلاً منfalse. تريد إضافة علامة صح (✅) إلى العناصر المعبأة إذا كانتisPacked={true}.

يمكنك كتابة هذا كـعبارة if/elseكما يلي:

إذا كانت خاصيةisPacked هي true، فإن هذا الكوديرجع شجرة JSX مختلفة.مع هذا التغيير، تحصل بعض العناصر على علامة صح في النهاية:

جرب تعديل ما يتم إرجاعه في أي من الحالتين، وشاهد كيف تتغير النتيجة!

لاحظ كيف تنشئ منطقًا متفرعًا باستخدام عباراتif وreturnفي JavaScript. في React، يتم التعامل مع تدفق التحكم (مثل الشروط) بواسطة JavaScript.

إرجاع لا شيء بشكل شرطي باستخدامnull

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

إذا كانتisPackedصحيحة، سيعيد المكون لا شيء، أيnull. وإلا، سيعيد JSX ليتم تصييره.

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

تضمين JSX بشكل شرطي

في المثال السابق، كنت تتحكم في أي شجرة JSX (إن وجدت!) سيتم إرجاعها بواسطة المكون. ربما لاحظت بالفعل بعض التكرار في ناتج التصيير:

تشبه إلى حد كبير

كلا الفرعين الشرطيين يعيدان<li className="item">...</li>:

على الرغم من أن هذا التكرار ليس ضارًا، إلا أنه قد يجعل الكود الخاص بك أكثر صعوبة في الصيانة. ماذا لو أردت تغييرclassName؟ سيتعين عليك القيام بذلك في مكانين في الكود الخاص بك! في مثل هذه الحالة، يمكنك تضمين القليل من JSX بشكل شرطي لجعل الكود الخاص بك أكثرDRY.

العامل الشرطي الثلاثي (? :)

يحتوي JavaScript على بناء جملة مضغوط لكتابة تعبير شرطي — وهوالعامل الشرطيأو "العامل الثلاثي".

بدلاً من هذا:

يمكنك كتابة هذا:

يمكنك قراءته على أنه"إذا كانisPackedصحيحًا، إذن (?) اعرضname + ' ✅'، وإلا (:) اعرضname".

لنفترض الآن أنك تريد لف نص العنصر المكتمل في علامة HTML أخرى، مثل<del>لشطبه. يمكنك إضافة المزيد من الأسطر الجديدة والأقواس بحيث يكون من السهل تضمين المزيد من JSX في كل حالة:

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

عامل AND المنطقي (&&)

اختصار شائع آخر ستواجهه هوعامل AND المنطقي (&&) في JavaScript.داخل مكونات React، غالبًا ما يظهر عندما تريد عرض بعض JSX عندما يكون الشرط صحيحًا،أو عدم عرض أي شيء بخلاف ذلك.باستخدام&&، يمكنك عرض علامة الاختيار بشكل شرطي فقط إذا كانisPacked true:

يمكنك قراءة هذا على أنه"إذا كانisPacked، إذن (&&) اعرض علامة الاختيار، وإلا، لا تعرض أي شيء".

ها هو في العمل:

يعيدتعبير JavaScript &&قيمة جانبه الأيمن (في حالتنا، علامة الاختيار) إذا كان جانبه الأيسر (شرطنا)true. لكن إذا كان الشرطfalse، يصبح التعبير بأكملهfalse. تعتبر React أنfalseبمثابة "فجوة" في شجرة JSX، تمامًا مثلnullأوundefined، ولا تعرض أي شيء مكانه.

تعيين JSX شرطيًا لمتغير

عندما تعيق الاختصارات كتابة الكود العادي، جرب استخدام عبارةifومتغير. يمكنك إعادة تعيين المتغيرات المعرفة باستخدامlet، لذا ابدأ بتوفير المحتوى الافتراضي الذي تريد عرضه، الاسم:

استخدم عبارةifلإعادة تعيين تعبير JSX إلىitemContentإذا كانت قيمةisPackedهيtrue:

الأقواس المعقوفة تفتح "نافذة إلى عالم JavaScript".قم بتضمين المتغير باستخدام الأقواس المعقوفة في شجرة JSX المُرجعة، مع وضع التعبير المحسوب مسبقًا داخل JSX:

هذا الأسلوب هو الأكثر تفصيلاً، ولكنه أيضًا الأكثر مرونة. ها هو في العمل:

كما في السابق، هذا يعمل ليس فقط للنص، ولكن لأي JSX أيضًا:

إذا لم تكن معتادًا على JavaScript، فقد تبدو هذه الأنماط المتنوعة مربكة في البداية. ومع ذلك، فإن تعلمها سيساعدك على قراءة وكتابة أي كود JavaScript — وليس فقط مكونات React! اختر النمط الذي تفضله للبدء، ثم راجع هذه المرجعية مرة أخرى إذا نسيت كيفية عمل الأنماط الأخرى.

ملخص

• في React، تتحكم في منطق التفرع باستخدام JavaScript.
• يمكنك إرجاع تعبير JSX بشكل شرطي باستخدام عبارةif.
• يمكنك حفظ بعض JSX بشكل شرطي في متغير ثم تضمينه داخل JSX آخر باستخدام الأقواس المعقوفة.
• في JSX،{cond ? <A /> : <B />}تعني"إذا كانcondصحيحًا، اعرض<A />، وإلا<B />".
• في JSX،{cond && <A />}تعني"إذا كانcondصحيحًا، اعرض<A />، وإلا لا تعرض شيئًا".
• الاختصارات شائعة، لكن ليس عليك استخدامها إذا كنت تفضل استخدامifالعادي.