رندر شرطی (Conditionals)

در React، رندر شرطی در React یعنی گاهی چیزی را نشان بدهی و گاهی قایمش کنی. مثل وقتی در بازی فقط اگر امتیازت بالا باشد، پیام «بردی» نمایش داده می شود.

مفهوم رندر شرطی در React

رندر شرطی (Conditional Rendering) یعنی خروجی کامپوننت بسته به یک شرط عوض شود. شرط همان عبارت منطقی است که جوابش یا درست است یا نادرست؛ مثل نمره >= 10 در مدرسه.

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

رندر شرطی با دستور if در React

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

function MissedGoal() {
  return (
    <h1>MISSED!</h1>
  );
}

function MadeGoal() {
  return (
    <h1>Goal!</h1>
  );
}

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

حالا یک کامپوننت می سازیم که بر اساس یک پراپس تصمیم بگیرد کدام کامپوننت را نمایش دهد.

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return (
      <MadeGoal />
    );
  }
  return (
    <MissedGoal />
  );
}

createRoot(document.getElementById("root")).render(
  <Goal isGoal={false} />
);

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

اینجا اگر isGoal درست باشد، کامپوننت MadeGoal برمی گردد. در غیر این صورت، MissedGoal برمی گردد و گل از دست رفته نمایش داده می شود.

حالا مقدار پراپس را عوض کن تا تفاوت را ببینی.

createRoot(document.getElementById("root")).render(
  <Goal isGoal={true} />
);

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

این بار شرط درست است و کامپوننت گل موفق نمایش داده می شود. بنابراین فقط با عوض کردن یک پراپس، خروجی کاملاً عوض می شود.

گام به گام ساخت رندر شرطی با if

1. دو کامپوننت ساده بساز؛ مثلاً MissedGoal و MadeGoal.
2. یک کامپوننت میانی به نام Goal تعریف کن.
3. داخل آن، یک متغیر مثل isGoal از روی پراپس بگیر.
4. با if تصمیم بگیر کدام کامپوننت را return کنی.

رندر شرطی با عملگر منطقی &&

روش دوم استفاده از عملگر منطقی && است. این عملگر یعنی «و». در جاوااسکریپت، اگر سمت چپ درست باشد، سمت راست را هم بررسی و برمی گرداند.

در رندر شرطی، از این ویژگی استفاده می کنیم. اگر شرط درست باشد، قسمت راست که یک JSX است رندر می شود.

function Car(props) {
  return (
    <>
      {props.brand && (
        <h1>My car is a {props.brand}!</h1>
      )}
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <Car brand="Ford" />
);

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

اگر props.brand مقدار داشته باشد، تیتر «My car is a Ford!» نمایش داده می شود. اما اگر برند خالی باشد، سمت راست && اصلاً رندر نمی شود.

حالا برند را خالی کن تا خروجی را ببینی.

createRoot(document.getElementById("root")).render(
  <Car />
);

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

در این حالت، چون props.brand خالی است، تیتر ماشین نمایش داده نمی شود. بنابراین صفحه خالی تر می ماند.

گام به گام استفاده از && در JSX

1. یک شرط انتخاب کن؛ مثلاً props.brand.
2. در JSX بنویس {condition && ( <h1>...</h1> )}.
3. اگر شرط درست باشد، تگ داخل پرانتز رندر می شود.
4. اگر شرط غلط باشد، هیچ چیزی نمایش داده نمی شود.

رندر شرطی با عملگر سه تایی (Ternary Operator)

عملگر سه تایی (Ternary Operator) یک فرم کوتاه برای if/else است. شکل کلی آن این طور است:

condition ? true : false;

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

اگر شرط درست باشد، بخش قبل از دو نقطه اجرا می شود. اگر شرط غلط باشد، بخش بعد از دو نقطه اجرا می شود.

حالا همان مثال گل را با عملگر سه تایی بازنویسی می کنیم تا رندر شرطی در React را کوتاه تر ببینیم.

function Goal(props) {
  const isGoal = props.isGoal;
  return (
    <>
      {isGoal ? (
        <MadeGoal />
      ) : (
        <MissedGoal />
      )}
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <Goal isGoal={false} />
);

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

اگر isGoal درست باشد، <MadeGoal /> رندر می شود. در غیر این صورت، <MissedGoal /> رندر می شود. این دقیقاً کار if/else است، فقط کوتاه تر.

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

جمع بندی سریع رندر شرطی (Conditionals)

• رندر شرطی در React یعنی نمایش خروجی بر اساس درست یا غلط بودن یک شرط.
• می توانی از if برای انتخاب بین چند کامپوننت استفاده کنی.
• با عملگر && فقط زمانی چیزی رندر می شود که شرط درست باشد.
• عملگر سه تایی نسخه کوتاه if/else است و در JSX کاربردی است.
• برای مرور دوباره رندر شرطی در React همیشه می توانی به همین صفحه برگردی.