شرط ها در JSX (JSX If Statements)

اینجا می خواهیم ساده بفهمیم شرط ها در JSX چطور کار می کنند. شرط یعنی if که تصمیم می گیرد چه چیزی نمایش داده شود. مثلا مثل معلمی که می گوید اگر نمره بالای 18 بود، آفرین بگو؛ اگر نبود، فقط لبخند بزن.

شرط ها در JSX کجا مجاز هستند؟

ری اکت از شرط ها در JSX پشتیبانی می کند، اما نه داخل خود تگ JSX. یعنی نمی توانی مستقیم داخل متن تگ، if بنویسی. باید if را بیرون JSX بنویسی یا از عملگر سه تایی استفاده کنی.

همچنین هر وقت می خواهی نتیجه یک شرط یا عبارت را داخل JSX نشان بدهی، باید آن را داخل آکولاد {} بگذاری. این قانون برای همه عبارت ها در JSX ثابت است.

روش اول: استفاده از if بیرون JSX

در این روش، شرط if را در ابتدای تابع کامپوننت می نویسی. بعد مقدار یک متغیر را عوض می کنی و در return فقط همان متغیر را نمایش می دهی. بنابراین JSX تمیز و ساده می ماند.

مثال: انتخاب میوه با if

function Fruit() {
  const x = 5;
  let y = "Apple";
  if (x < 10) {
    y = "Banana";
  }
  return (
    <h1>{y}</h1>
  );
}

مشاهده در ادیتور

اینجا اول x را 5 می گذاریم. بعد y را پیش فرض "Apple" می گیریم. چون x از 10 کم تر است، در if مقدار y به "Banana" عوض می شود. در JSX فقط {y} را نشان می دهیم؛ پس خروجی Banana است.

نکته: این روش برای شرط های چندمرحله ای یا طولانی خیلی خواناتر است. چون منطق تصمیم گیری از بخش نمایشی جدا می شود.

روش دوم: استفاده از عملگر سه تایی در JSX

روش دوم این است که if را به صورت عملگر سه تایی (Ternary Operator) بنویسی. این عملگر مثل جمله کوتاه تصمیم گیر است: اگر این، آن؛ وگرنه چیز دیگر. این روش داخل JSX و بیرون JSX هم قابل استفاده است.

مثال: شرط ها در JSX با سه تایی

function Fruit() {
  const x = 5;
  return (
    <h1>{x < 10 ? "Banana" : "Apple"}</h1>
  );
}

مشاهده در ادیتور

در این مثال شرط ها در JSX داخل همان آکولاد نوشته شده است. اگر x کمتر از 10 باشد، متن Banana نمایش داده می شود. اگر نباشد، متن Apple نمایش داده می شود. همه چیز در یک خط داخل تگ h1 قرار گرفته است.

نکته: هر جا از سه تایی استفاده می کنی، فراموش نکن کل عبارت را داخل {} قرار دهی. بدون آکولاد، JSX آن را فقط یک رشته معمولی می بیند.

جاگذاری شرط ها در JSX با آکولاد

وقتی می گوییم شرط ها در JSX، منظورمان این است که نتیجه شرط را داخل JSX جا بدهیم. ری اکت خودش if را اجرا نمی کند؛ فقط خروجی عبارت را رندر می کند. بنابراین همیشه باید شرط را به صورت یک عبارت بنویسی.

در روش اول، ابتدا متغیر y را با if تنظیم کردیم. در روش دوم، خود شرط سه تایی مستقیما داخل JSX قرار گرفت. در هر دو حالت، بخش نمایشی فقط یک مقدار نهایی دریافت می کند.

تمرین مرحله به مرحله برای شرط ها در JSX

برای اینکه شرط ها در JSX خوب در ذهنت بنشیند، این تمرین ها را انجام بده.

1. یک کامپوننت بساز که اگر سن کمتر از 18 بود، متن "دانش آموز" و اگر نبود، متن "بزرگسال" را با روش if بیرون JSX نمایش دهد.
2. همان کامپوننت را دوباره بنویس، اما این بار از عملگر سه تایی داخل JSX استفاده کن تا متن را انتخاب کند.
3. بعد از انجام این تمرین ها، صفحه عبارت ها در JSX (JSX Expressions) را مرور کن تا ترکیب شرط و عبارت برایت کاملا روشن شود.

اگر دوست داری بیشتر روی عملگر سه تایی کار کنی، به بخش عملگر سه تایی در جاوااسکریپت هم سر بزن. آن جا خود عملگر سه تایی را جداگانه تمرین می کنی و بعد دوباره می توانی به شرط ها در JSX برگردی.

برای مرور کلی این مطلب، همیشه می توانی به همین صفحه شرط ها در JSX برگردی و مثال ها را دوباره ببینی.

جمع بندی سریع

• نمی توانی مستقیما if را داخل متن JSX بنویسی.
• می توانی if را بیرون JSX بنویسی و فقط متغیر را نمایش دهی.
• برای شرط های کوتاه، از عملگر سه تایی در JSX استفاده کن.
• همیشه نتیجه شرط ها در JSX را داخل {} قرار بده.
• برای درک دقیق تر، حتما بخش عبارت ها و سه تایی را هم تمرین کن.