Rendering و Conditional Rendering

Rendering چیست و چگونه محتوا را به‌صورت شرطی نمایش دهیم

تا اینجا یاد گرفتیم چطور کامپوننت بسازیم و با Props و Children به آن داده بدهیم. اما این کامپوننت‌ها چگونه در واقع روی صفحه ظاهر می‌شوند؟ و مهم‌تر، چگونه می‌توانیم تصمیم بگیریم که بر اساس شرایط مختلف، چه چیزی نمایش داده شود؟ این درس به همین دو سؤال می‌پردازد.

Rendering به زبان ساده

وقتی می‌گوییم React یک کامپوننت را «رندر می‌کند»، منظور این است که React تابع آن کامپوننت را اجرا می‌کند تا مشخص کند خروجی JSX آن در این لحظه چیست، و سپس آن خروجی را (به‌صورت غیرمستقیم) به DOM واقعی مرورگر تبدیل می‌کند. جزئیات دقیق این فرایند، شامل تفاوت بین رندر شدن و اعمال تغییر در DOM، موضوع فصلی جداگانه در ادامه دوره است؛ در این درس فقط با مفهوم پایه‌ای آن آشنا می‌شویم: هر کامپوننت بر اساس داده فعلی خودش، یک خروجی JSX تولید می‌کند.

چرا نمایش شرطی محتوا لازم است

در بسیاری از موقعیت‌های واقعی، نمی‌خواهیم همیشه یک محتوای ثابت نمایش داده شود. برای مثال:

• اگر کاربر وارد شده باشد، نام او نمایش داده شود؛ در غیر این صورت، دکمه ورود نمایش داده شود.
• اگر داده در حال بارگذاری باشد، پیام «در حال بارگذاری» نمایش داده شود.
• اگر لیستی خالی باشد، پیامی مبنی بر خالی بودن نمایش داده شود.

به این‌گونه تصمیم‌گیری‌ها درباره اینکه چه چیزی نمایش داده شود، Conditional Rendering گفته می‌شود. نکته مهم این است که React هیچ نحو (Syntax) خاصی برای شرط‌گذاری ارائه نمی‌دهد؛ در عوض، از همان امکانات جاوااسکریپت استفاده می‌کنیم.

روش اول: عملگر شرطی سه‌بخشی

همان‌طور که در درس Expressionها دیدیم، عملگر شرطی سه‌بخشی (condition ? A : B) یک Expression است و می‌تواند مستقیماً داخل JSX استفاده شود:

function Status({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>خوش آمدید</p> : <p>لطفاً وارد شوید</p>}
    </div>
  );
}

روش دوم: عملگر منطقی &&

وقتی فقط بخواهیم چیزی را در یک حالت نمایش دهیم و در حالت دیگر هیچ‌چیز نمایش داده نشود، استفاده از عملگر && رایج‌تر است:

function Notification({ hasNewMessage }) {
  return (
    <div>
      {hasNewMessage && <p>یک پیام جدید دارید</p>}
    </div>
  );
}

در این الگو، اگر hasNewMessage مقدار Falsy (مانند false) داشته باشد، عبارت سمت راست && اصلاً ارزیابی و رندر نمی‌شود.

یک نکته مهم درباره && و مقادیر عددی

باید در استفاده از && با مقادیر عددی دقت کرد. اگر مقدار سمت چپ عدد 0 باشد، خود عدد 0 رندر می‌شود، نه اینکه چیزی نمایش داده نشود؛ چون 0 یک مقدار قابل رندر است، نه یک مقدار «خالی»:

function CartCount({ count }) {
  return <div>{count && <p>{count} کالا در سبد خرید</p>}</div>;
}
// اگر count برابر 0 باشد، عدد 0 روی صفحه نمایش داده می‌شود

برای جلوگیری از این مشکل، معمولاً شرط را به‌شکل صریح‌تر می‌نویسیم، مثلاً count > 0 && ....

روش سوم: ذخیره نتیجه در یک متغیر

وقتی منطق شرطی پیچیده‌تر می‌شود (مثلاً چند حالت مختلف داریم)، معمولاً خواناتر است که پیش از return، نتیجه را در یک متغیر ذخیره کنیم و سپس همان متغیر را در JSX استفاده کنیم:

function OrderStatus({ status }) {
  let message;

  if (status === "pending") {
    message = <p>در حال پردازش</p>;
  } else if (status === "shipped") {
    message = <p>ارسال شده</p>;
  } else {
    message = <p>تحویل داده شده</p>;
  }

  return <div>{message}</div>;
}

این روش برای شرط‌های ساده کمی طولانی‌تر است، اما وقتی تعداد حالت‌ها زیاد می‌شود، خوانایی بهتری نسبت به تودرتو کردن چند عملگر شرطی سه‌بخشی دارد.

مثال قابل اجرا

function App() {
  const isLoggedIn = true;
  const unreadCount = 3;

  return (
    <div>
      {isLoggedIn ? <p>خوش آمدید</p> : <p>لطفاً وارد شوید</p>}
      {unreadCount > 0 && <p>{unreadCount} پیام خوانده‌نشده</p>}
    </div>
  );
}

جمع‌بندی

Conditional Rendering به معنای استفاده از امکانات معمولی جاوااسکریپت، مانند عملگر شرطی سه‌بخشی، عملگر && یا دستور if، برای تصمیم‌گیری درباره اینکه چه محتوایی در JSX نمایش داده شود، است. React ابزار خاصی برای این کار ارائه نمی‌دهد؛ همین انعطاف جاوااسکریپت کافی است. در درس بعدی به سراغ نمایش لیست‌ها و مفهوم مهم Key می‌رویم.