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

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

طرق يمكنك من خلالها تنفيذ العرض الشرطي

لمتابعة هذه الأمثلة ، يجب أن يكون لديك فهم أساسي لكيفية عمل React. إذا كنت تكافح في هذه الحالة ، فلا تقلق - فلدينا فائدة دليل المبتدئين إلى React.js.

استخدام الجمل الشرطية

كما هو الحال في JavaScript ، يمكنك استخدام الجمل الشرطية مثل if… else لإنشاء عناصر عند استيفاء شروط معينة.

على سبيل المثال ، يمكنك عرض عنصر محدد في ملف إذا حظر عند استيفاء شرط وعرض شرط مختلف في آخر منع إذا لم يتم استيفاء الشرط.

ضع في اعتبارك المثال التالي الذي يعرض إما زر تسجيل الدخول أو تسجيل الخروج بناءً على حالة تسجيل دخول المستخدم.

وظيفة لوحة القيادة (الدعائم) {
 const {isLoggedIn} = الدعائم
 إذا (isLoggedIn) {
 إرجاع تسجيل خروج
 } آخر{
 إرجاع تسجيل الدخول
 }
}

تعرض هذه الوظيفة زرًا مختلفًا وفقًا لملف isLoggedIn تم تمرير القيمة كدعم.

متعلق ب: كيفية استخدام الدعائم في ReactJS

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

أعد كتابة الوظيفة أعلاه على النحو التالي:

وظيفة لوحة القيادة (الدعائم) {
 const {isLoggedIn} = الدعائم
 إرجاع (
 <>
 {تم الدخول؟تسجيل خروج:تسجيل الدخول)
 )
}

المشغل الثلاثي يجعل الوظيفة أنظف وأسهل في القراءة مقارنة بـ إذا كان غير ذلك بيان.

تعريف متغيرات العنصر

متغيرات العناصر هي متغيرات يمكنها الاحتفاظ بعناصر JSX ويتم عرضها عند الحاجة في تطبيق React.

يمكنك استخدام متغيرات العنصر لعرض جزء معين فقط من المكون عندما يفي تطبيقك بالشرط المحدد.

على سبيل المثال ، إذا كنت تريد عرض زر تسجيل الدخول فقط عندما لا يقوم المستخدم بتسجيل الدخول وزر تسجيل الخروج فقط عند تسجيل الدخول ، يمكنك استخدام متغيرات العنصر.

وظيفة LoginBtn (الدعائم) {
 إرجاع (

 تسجيل الدخول

 );
}
وظيفة LogoutBtn (الدعائم) {
 إرجاع (

 تسجيل خروج

 );
}
وظيفة لوحة القيادة () {
 const [loggedIn، setLoggedIn] = useState (صواب)
 const handleLogin = () => {
 setLoggedIn (صواب)
 }
 const handleLogout = () => {
 setLoggedIn (خطأ)
 }
 اسمحوا الزر
 إذا (تم تسجيل الدخول) {
 زر = 
 } آخر {
 زر = 
 }
 إرجاع (
 <>
 {تسجيل الدخول}
 )
}

في الكود أعلاه ، أنشئ أولاً مكوِّني زر تسجيل الدخول وتسجيل الخروج ثم حدد ملف مكون لتقديم كل منهم في ظروف مختلفة.

في هذا المكون ، استخدم خطاف حالة React لتتبع وقت تسجيل دخول المستخدم.

متعلق ب: إتقان مهارات الرد الخاصة بك عن طريق تعلم هذه الخطافات الإضافية

الآن ، اعتمادًا على الحالة ، يمكنك إما عرض ملف أو عنصر.

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

باستخدام العوامل المنطقية

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

إذا كنت ترغب في إبلاغ المستخدم بعدد الإشعارات التي لديه فقط عندما يكون لديه إشعار واحد أو أكثر ، فيمكنك استخدام ما يلي.

وظيفة ShowNotifications (الدعائم) {
 const {الإخطارات} = الدعائم
 إرجاع (
 <>
 {notifications.length> 0 &&

 لديك إشعارات {notifications.length}.


 }
 )
}

بعد ذلك ، لتصيير عنصر إذا تم تقييم التعبير المنطقي && إلى قيمة خاطئة ، اربط المنطقي || المشغل أو العامل.

تعرض الوظيفة التالية رسالة "ليس لديك إشعارات" إذا لم يتم تمرير أي إشعارات كدعامات.

وظيفة ShowNotifications (الدعائم) {
 const {الإخطارات} = الدعائم
 إرجاع (
 <>
 {notifications.length> 0 &&

 لديك إشعارات {notifications.length}.
 || 
ليس لديك إخطارات

 }
 )
}

منع مكون من العرض

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

ضع في اعتبارك المكون التالي الذي يعرض زر تحذير فقط إذا تم تمرير رسالة تحذير كأدوات.

وظيفة تحذير (الدعائم) {
 const {warningMessage} = الدعائم
 إذا (! warningMessage) {
 العودة فارغة
 }
 إرجاع (
 <>
تحذير
 )
}

الآن ، إذا قمت بتمرير "رسالة تحذير" إلى المكون ، سيتم عرض زر تحذير. ومع ذلك ، إذا لم تقم بذلك ، سيعود فارغًا ولن يتم عرض الزر.

 // يتم تقديم زر التحذير
 // لا يتم عرض زر التحذير

أمثلة على العرض الشرطي في تطبيقات Real-Life React

استخدم العرض الشرطي لإنجاز مهام مختلفة في تطبيقك. يتضمن بعضها عرض بيانات API فقط عندما تكون متاحة وعرض رسالة خطأ فقط عند وجود خطأ.

عرض البيانات التي تم جلبها من API في React

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

توضح الوظيفة التالية كيف يمكنك عرض البيانات التي تعرضها واجهة برمجة التطبيقات بشكل مشروط.

وظيفة FetchData () {
 const [data، setData] = useState (خالية) ؛
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key = DEMO_KEY "،
 // جلب البيانات من API باستخدام Axios
 const fetchData = async () => {
 استجابة const = انتظار axios.get (apiURL)
 // تحديث الحالة بالبيانات
 setData (response.data) 
 }
 إرجاع (
 <>
الصورة الفلكية اليوم

 {
 بيانات && 
{data.title}

{data.explanation}

 }
 )
}

في الوظيفة أعلاه ، قم بإحضار البيانات من ملف NASA Apod API باستخدام Axios. عندما تعرض واجهة برمجة التطبيقات ردًا ، حدّث الحالة واستخدم عامل التشغيل المنطقي && لعرض البيانات فقط عندما تكون متاحة.

متعلق ب: كيفية استهلاك واجهات برمجة التطبيقات في التفاعل باستخدام الجلب والمحاور

عرض رسائل الخطأ

في الحالات التي تريد فيها عرض خطأ عندما يكون موجودًا فقط ، استخدم العرض الشرطي.

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

وظيفة showError () {
 const [error، setError] = useState (خالية)
 إرجاع (
 <>
 {
 إذا (خطأ) {
حدث خطأ: {error}

 }
 }
 )
}

اختيار ما يجب استخدامه في تطبيق React الخاص بك

في هذا البرنامج التعليمي ، تعرفت على الطرق العديدة التي يمكنها عرض عناصر JSX بشكل مشروط.

جميع الطرق التي تمت مناقشتها تقدم نفس النتائج. حدد ما تريد استخدامه بناءً على حالة الاستخدام ومستوى القراءة الذي تريد تحقيقه.

أفضل 7 دروس مجانية لتعلم التفاعل وإنشاء تطبيقات الويب

نادرًا ما تكون الدورات التدريبية المجانية شاملة ومفيدة - لكننا وجدنا العديد من دورات React الممتازة وستجعلك تبدأ بالشكل الصحيح.

اقرأ التالي

عن المؤلف