رندر شرطی در React – آموزش if، Ternary و عملگر && با مثال

در اپلیکیشن‌های واقعی، همه کاربران همه چیز را نمی‌بینند. گاهی باید پیام «لطفاً وارد شوید» نشان دهید، گاهی دکمه مدیریت و گاهی هیچ‌چیز. رندر شرطی (Conditional Rendering) یعنی نمایش یا عدم نمایش بخش‌های JSX بر اساس یک شرط — یکی از پایه‌های ساخت UI هوشمند در React.

رندر شرطی چیست؟

رندر شرطی به معنای تصمیم‌گیری در زمان رندر است: اگر شرط برقرار باشد، یک JSX نمایش داده می‌شود؛ در غیر این صورت JSX دیگری یا هیچ‌چیز. React سه روش اصلی برای این کار ارائه می‌دهد: if خارج از JSX، عملگر ternary و عملگر &&.

روش ۱: استفاده از if قبل از return

داخل JSX نمی‌توان مستقیماً if نوشت، اما قبل از return آزاد هستید:

export default function Welcome() {
  const isLogin = true;

  if (isLogin) {
    return <h1>خوش آمدید</h1>;
  }

  return <h1>لطفاً وارد شوید</h1>;
}

این روش برای شرط‌های پیچیده یا return زودهنگام بسیار خوانا است.

روش ۲: عملگر Ternary (? :)

وقتی می‌خواهید یکی از دو حالت را مستقیماً داخل JSX نشان دهید:

export default function Welcome() {
  const isLogin = false;

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

ساختار:

شرط ? JSX_درست : JSX_غلط

روش ۳: عملگر && (AND منطقی)

وقتی فقط در صورت درست بودن شرط چیزی نمایش دهید و حالت else ندارید:

export default function Dashboard() {
  const isAdmin = true;

  return (
    <div>
      {isAdmin && <h1>پنل مدیریت</h1>}
    </div>
  );
}

• شرط true → JSX رندر می‌شود.
• شرط false → React چیزی نمایش نمی‌دهد.

مقایسه سه روش

مثال ترکیبی: داشبورد کاربر

export default function UserPanel() {
  const isLogin = true;
  const isAdmin = true;

  if (!isLogin) {
    return <h1>لطفاً وارد شوید</h1>;
  }

  return (
    <div>
      <h1>خوش آمدید</h1>
      {isAdmin ? (
        <p>شما مدیر سیستم هستید</p>
      ) : (
        <p>شما کاربر عادی هستید</p>
      )}
      {isAdmin && <button>ورود به پنل مدیریت</button>}
    </div>
  );
}

نکات کاربردی

• برای چند شرط پشت سر هم، if/else if قبل از return خواناتر از ternary تو در تو است.
• در && مراقب باشید شرط 0 یا "" باشد؛ React ممکن است آن را رندر کند. در این موارد از Boolean() یا مقایسه صریح استفاده کنید.
• state و props معمولاً منبع شرط‌های رندر هستند — مثلاً isLoading، error یا user.role.

جمع‌بندی

رندر شرطی به UI شما هوش می‌دهد. از if برای منطق پیچیده، از ternary برای دو حالت متقابل و از && برای نمایش اختیاری استفاده کنید. ترکیب این سه روش در پروژه‌های واقعی رایج است و با تسلط بر آن‌ها، هر سناریوی نمایشی — از loading تا دسترسی نقش‌محور — را پوشش می‌دهید.