رندر مشروط

در پروژه‌های واقعی، کامپوننت‌های شما اغلب نیاز دارند تا با توجه به شرایط مختلف (مثلاً لاگین بودن کاربر، خالی بودن سبد خرید یا وضعیت یک داده)، ظاهر متفاوتی را نشان دهند. در React، شما جریان برنامه را با ابزارهای شرطی خود جاوااسکریپت مثل دستور if، اپراتور && و عملگر سه‌تایی (? :) کنترل می‌کنید.

چیزهایی که در این درس یاد می‌گیرید:

• نحوه بازگرداندن تگ‌های مختلف بر اساس شرط (با دستور if)

• نحوه مخفی کردن یا نمایش یک المان (با مقدار null)

• میانبرهای محبوب رندر مشروط در ری‌اکت (&& و عملگر سه‌تایی)

• ذخیره ساختار JSX درون متغیرها برای کدهای پیچیده

۱. بازگرداندن مشروط JSX با دستور if

فرض کنید یک کامپوننت به نام PackingList داریم که قرار است لوازم سفر را لیست کند. هر آیتم یک پروپِ بولین (True/False) به نام isPacked دارد. هدف ما این است که اگر آیتم جمع‌آوری شده بود (isPacked={true})، یک تیک سبز (✅) جلوی آن نشان دهیم.

ساده‌ترین راه، استفاده از یک شرط if سنتی داخل تابع است:

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>; // اگر شرط برقرار بود، این خط اجرا و تابع تمام می‌شود
  }
  return <li className="item">{name}</li>; // اگر شرط برقرار نبود
}

در این روش، ما دو شاخه کد مجزا ساختیم. این کار نشان می‌دهد که کنترل جریان ظاهر سایت، کاملاً در دست جاوااسکریپت است.

ناپدید کردن یک المان با استفاده از null

گاهی اوقات اگر شرطی برقرار بود، اصلاً نمی‌خواهید هیچ چیزی روی صفحه رندر شود. از آنجا که یک کامپوننت همیشه باید خروجی داشته باشد، در این حالت می‌توانید مقدار null را برگشت دهید:

function Item({ name, isPacked }) {
  if (isPacked) {
    return null; // این آیتم کاملاً در صفحه مخفی می‌شود و چیزی رندر نمی‌کند
  }
  return <li className="item">{name}</li>;
}

۲. استفاده از عملگر سه تایی (? :) برای کدهای تمیزتر (DRY)

اگر به کدهای بخش قبل دقت کنید، تگ <li className="item"> در هر دو شاخه تکرار شده است. این تکرار خطرناک است؛ چون اگر بعداً بخواهید نام کلاس CSS را تغییر دهید، باید این کار را در دو جا انجام دهید.

برای رعایت اصل عدم تکرار کدهام (DRY)، می‌توانیم از عملگر سه‌تایی (Ternary Operator) درون خود JSX استفاده کنیم:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {/* خوانش: آیا اسمبل شده؟ اگر بله، تیک بزن، در غیر این صورت خود نام را نشان بده */}
      {isPacked ? name + ' ✅' : name}
    </li>
  );
}

اگر نیاز دارید کدهای JSX بزرگ‌تری را درون شرط‌ها رندر کنید (مثلاً می‌خواهید روی آیتم‌های جمع‌آوری شده خط بخورد)، کافی است خطوط جدید را داخل پرانتز باز کنید:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>{name + ' ✅'}</del>
      ) : (
        name
      )}
    </li>
  );
}

۳. میانبر عملگر منطقی && (Logical AND)

یکی از پرکاربردترین میانبرهایی که در کدهای ری‌اکت خواهید دید، اپراتور && است. این ابزار زمانی کاربرد دارد که می‌خواهید اگر شرط برقرار بود، یک المان نشان داده شود و در غیر این صورت، اصلاً چیزی رندر نشود.

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

مکانیزم کارکرد: در جاوااسکریپت، اگر سمت چپِ عبارت && درست (true) باشد، مقدار سمت راست (در اینجا تیک سبز) برگردانده می‌شود. اما اگر سمت چپ نادرست (false) باشد، کل عبارت false می‌شود. ری‌اکت مقادیر false، null یا undefined را به عنوان یک حفره خالی در نظر می‌گیرد و هیچ چیزی جای آن‌ها رندر نمی‌کند.

⚠️ یک تله بسیار بزرگ با اعداد: هرگز در سمت چپِ && از اعداد استفاده نکنید! برای مثال، اگر بنویسید messageCount && <p>پیام جدید</p>، شاید فکر کنید اگر تعداد پیام‌ها 0 باشد چیزی نشان داده نمی‌شود؛ اما جاوااسکریپت عدد 0 را ارزیابی کرده و ری‌اکت خود عدد 0 را روی صفحه رندر می‌کند!

راه حل اصلاحی: سمت چپ را همیشه به یک عملیات مقایسه‌ای بولین تبدیل کنید: messageCount > 0 && <p>پیام جدید</p>.

۴. منعطف‌ترین روش: ذخیره کدهای JSX درون یک متغیر

وقتی شرط‌های شما خیلی تو در تو و مچاله می‌شوند و استفاده از && یا عملگر سه‌تایی خوانایی کد را از بین می‌برد، بهترین راهکار استفاده از دستور if معمولی و یک متغیر پذیرا (let) است:

function Item({ name, isPacked }) {
  // ۱. تعیین یک مقدار اولیه و پیش‌فرض برای متغیر
  let itemContent = name; 

  // ۲. در صورت برقرار بودن شرط، ساختار جدیدی به متغیر نسبت می‌دهیم
  if (isPacked) {
    itemContent = (
      <del>
        {name + " ✅"}
      </del>
    );
  }

  // ۳. تزریق بسیار تمیز متغیر درون خروجی اصلی کامپوننت
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

این روش با اینکه خطوط بیشتری می‌برد، اما برای مدیریت فرم‌ها، ساختارهای در حال لود (Loading) و شرایط پیچیده، منعطف‌ترین و خواناترین استایل کدنویسی است.

خلاصه نکات کلیدی (Recap)

• مدیریت شرط‌ها و منطق‌های چندشاخه در ری‌اکت کاملاً توسط زبان جاوااسکریپت انجام می‌شود.

• به کمک دستور if می‌توانید کل خروجی یک کامپوننت را بر اساس شرط عوض کنید یا با return null آن را کاملاً مخفی کنید.

• ساختار {cond ? <A /> : <B />} یعنی: اگر شرط برقرار بود کامپوننت A و در غیر این صورت کامپوننت B رندر شود.

• ساختار {cond && <A />} یعنی: اگر شرط برقرار بود کامپوننت A رندر شود، در غیر این صورت هیچ چیز نشان داده نشود.

• هر زمان کدهای شرطی درون تگ‌ها شلوغ شد، از استراتژی ذخیره کدهای JSX درون متغیرها (let) استفاده کنید.