עיבוד מותנה מתייחס לשינוי ההתנהגות של אפליקציה בהתאם למצב שלה. לדוגמה, אתה יכול לשנות את הודעת הברכה של אפליקציית React שלך לכהה במהלך הלילה. בדרך זו יש לך הודעת תצוגה שונה בהתאם לשעה ביום.

רינדור מותנה מאפשר לך לרנדר רכיבים או אלמנטים שונים של React אם מתקיים תנאי. במדריך זה, אתה הולך ללמוד על הדרכים השונות בהן אתה יכול להשתמש בעיבוד מותנה ביישומי React.js.

דרכים שבהן תוכל ליישם עיבוד מותנה

כדי לעקוב אחר הדוגמאות הללו, אתה צריך להיות בעל הבנה בסיסית של איך React עובד. אם אתה נאבק במקרה זה, אל תדאג - יש לנו פתרון שימושי מדריך למתחילים ל-React.js.

שימוש בהצהרות מותנות

כמו ב-JavaScript, אתה יכול להשתמש בהצהרות מותנות כמו if…else כדי ליצור אלמנטים כאשר תנאים מסוימים מתקיימים.

לדוגמה, אתה יכול להציג אלמנט מוגדר ב- אם לחסום כאשר מתקיים תנאי ולהציג תנאי אחר ב- אַחֵר לחסום אם התנאי לא מתקיים.

שקול את הדוגמה הבאה שמציגה כפתור התחברות או התנתק בהתאם למצב ההתחברות של המשתמש.

function לוח מחוונים (אביזרים) {
 const { isLoggedIn } = אביזרים
 if (isLoggedIn){
 לַחֲזוֹר להתנתק
 } אחר{
 לַחֲזוֹר התחברות
 }
}

פונקציה זו מציגה כפתור שונה בהתאם ל הוא מחובר ערך שהועבר כאביזר.

קָשׁוּר: כיצד להשתמש באביזרים ב-ReactJS

לחלופין, אתה יכול להשתמש באופרטור הטרינרי. האופרטור השלישוני מקבל תנאי ואחריו הקוד לביצוע אם התנאי הוא אמת ואחריו הקוד לביצוע אם התנאי הוא מזויף.

כתוב מחדש את הפונקציה לעיל כ:

function לוח מחוונים (אביזרים) {
 const { isLoggedIn } = אביזרים
 לחזור (
 <>
 {נרשם?להתנתק:התחברות)
 )
}

האופרטור השלישוני הופך את הפונקציה לנקייה וקלה יותר לקריאה בהשוואה ל אחרת הַצהָרָה.

הכרזה על משתני אלמנט

משתני אלמנטים הם משתנים שיכולים להחזיק רכיבי JSX ולהציג אותם בעת הצורך באפליקציית React.

אתה יכול להשתמש במשתני אלמנטים כדי להציג רק חלק מסוים של הרכיב כאשר היישום שלך עומד בתנאי שצוין.

לדוגמה, אם ברצונך להציג רק כפתור התחברות כאשר המשתמש אינו מחובר וכפתור התנתק רק כאשר הוא מחובר, תוכל להשתמש במשתני אלמנטים.

function LoginBtn (אביזרים) {
 לחזור (

 התחברות

 );
}
function LogoutBtn (אביזרים) {
 לחזור (

 להתנתק

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (true)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 לחצן תן;
 if (התחבר) {
 כפתור = 
 } אחר {
 כפתור = 
 }
 לחזור (
 <>
 {מחובר}
 )
}

בקוד שלמעלה, תחילה יצרו את רכיבי כפתור ההתחברות והיציאה ולאחר מכן הגדר את רכיב לעיבוד כל אחד מהם בתנאים שונים.

ברכיב זה, השתמש ב-React state hook כדי לעקוב אחר מתי המשתמש מחובר.

קָשׁוּר: השתלט על כישורי התגובה שלך על ידי לימוד ווים נוספים אלה

עכשיו, בהתאם למדינה או להפוך את אוֹ רְכִיב.

אם המשתמש לא מחובר, עבד את ה רכיב אחרת להפוך את thה רְכִיב. שתי פונקציות האחיזה משנות את מצב הכניסה בעת לחיצה על הכפתור המתאים.

שימוש באופרטורים לוגיים

אתה יכול להשתמש בהיגיון && אופרטור לעיבוד מותנה של אלמנט. כאן אלמנט מוצג רק אם התנאי מוערך כ-true, אחרת מתעלמים ממנו.

אם אתה רוצה להודיע ​​למשתמש על מספר ההתראות שיש לו רק כאשר יש לו התראה אחת או יותר, תוכל להשתמש בהודעה הבאה.

function ShowNotifications (אביזרים) {
 const { התראות } = אביזרים
 לחזור (
 <>
 {notifications.length > 0 &&

 יש לך {notifications.length} התראות.


 }
 )
}

לאחר מכן, כדי לעבד אלמנט אם הביטוי && הלוגי מוערך לערך שגוי, שרשרת את ה-logical || מַפעִיל.

הפונקציה הבאה מציגה את ההודעה "אין לך התראות" אם לא הועברו הודעות כאביזר.

function ShowNotifications (אביזרים) {
 const { התראות } = אביזרים
 לחזור (
 <>
 {notifications.length > 0 &&

 יש לך {notifications.length} התראות.
 || 
אין לך התראות

 }
 )
}

מניעת רינדור של רכיב

כדי להסתיר רכיב למרות שהוא הוצג על ידי רכיב אחר, החזר null, במקום הפלט שלו.

שקול את הרכיב הבא שמציג כפתור אזהרה רק אם הודעת אזהרה מועברת כאביזרים.

function אזהרה (אביזרים) {
 const {warningMessage} = אביזרים
 if (!warningMessage) {
 החזר null
 }
 לחזור (
 <>
אַזהָרָה
 )
}

עכשיו, אם תעביר את 'הודעת אזהרה' ל- רכיב, כפתור אזהרה יוצג. עם זאת, אם לא, יחזיר null והלחצן לא יוצג.

 // כפתור האזהרה מוצג
 // כפתור האזהרה אינו מוצג

דוגמאות לעיבוד מותנה ביישומי React של החיים האמיתיים

השתמש בעיבוד מותנה כדי לבצע משימות שונות ביישום שלך. חלק מאלה כוללים עיבוד נתוני API רק כאשר הם זמינים והצגת הודעת שגיאה רק כאשר קיימת שגיאה.

עיבוד נתונים שנשלפו מ-API ב-React

שליפת נתונים מ-API עשויה להימשך זמן מה. לכן, ראשית, בדוק אם הוא זמין לפני השימוש בו באפליקציה שלך, אחרת React יזרוק שגיאה אם ​​היא לא זמינה.

הפונקציה הבאה מראה כיצד ניתן להציג נתונים המוחזרים על ידי API באופן מותנה.

function FetchData() {
 const [נתונים, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // אחזר נתונים מ-API באמצעות Axios
 const fetchData = אסינכרון () => {
 const response = await axios.get (apiURL)
 // עדכן מצב עם הנתונים
 setData (response.data) 
 }
 לחזור (
 <>
תמונת היום באסטרונומיה

 {
 נתונים && 
{data.title}

{data.explanation}

 }
 )
}

בפונקציה שלמעלה, אחזר את הנתונים מה- NASA Apod API באמצעות Axios. כאשר ה-API מחזיר תגובה, עדכן את המצב והשתמש באופרטור && לוגי כדי להציג את הנתונים רק כאשר הם זמינים.

קָשׁוּר: כיצד לצרוך ממשקי API ב-React באמצעות Fetch ו-Axios

הצגת הודעות שגיאה

במקרים שבהם ברצונך להציג שגיאה רק כשהיא קיימת, השתמש בעיבוד מותנה.

לדוגמה, אם אתה יוצר טופס וברצונך להציג הודעת שגיאה אם ​​משתמש הקליד בפורמט דוא"ל שגוי, עדכן את המצב בהודעת השגיאה והשתמש בהצהרת if כדי להציג אותה.

function showError() {
 const [error, setError] = useState (null)
 לחזור (
 <>
 {
 if (שגיאה) {
אירעה שגיאה: {error}

 }
 }
 )
}

בחירה במה להשתמש באפליקציית React שלך

במדריך זה, למדת על מספר דרכים שיכולות לעבד רכיבי JSX באופן מותנה.

כל השיטות שנדונו מספקות את אותן תוצאות. בחר במה להשתמש בהתאם למקרה השימוש, ורמת הקריאה שאתה רוצה להשיג.

7 מדריכי ההדרכה הטובים ביותר בחינם ללימוד תגובה ויצירת אפליקציות אינטרנט

קורסים בחינם הם לעתים רחוקות מקיפים ומועילים - אבל מצאנו כמה קורסי React שהם מצוינים ויעזרו לך להתחיל ברגל ימין.

קרא הבא

על הסופר