Expressionها در JSX و Fragment

استفاده از Expressionهای جاوااسکریپت در JSX و Fragmentها

در درس قبلی با نحو پایه JSX آشنا شدیم. اما رابط کاربری واقعی معمولاً ثابت نیست و باید بر اساس داده تغییر کند. برای این کار باید بتوانیم مقادیر جاوااسکریپتی را داخل JSX نمایش دهیم. این کار با Expression جاوااسکریپت انجام می‌شود.

Expression چیست

Expression در جاوااسکریپت به هر چیزی گفته می‌شود که نتیجه‌اش یک مقدار باشد؛ مانند یک متغیر، یک محاسبه ریاضی، فراخوانی یک تابع، یا نتیجه یک عملگر شرطی. برای قرار دادن یک Expression داخل JSX، آن را درون آکولاد { } می‌نویسیم.

const name = "سارا";

const element = <h1>سلام {name}</h1>;

هر چیزی که داخل این آکولادها بنویسیم، به‌عنوان جاوااسکریپت خالص ارزیابی می‌شود، نه به‌عنوان متن یا HTML.

چه چیزهایی داخل آکولاد مجاز است

از آنجا که داخل آکولاد باید یک Expression باشد نه یک Statement، مواردی مانند متغیرها، محاسبات، فراخوانی تابع و عملگر شرطی سه‌بخشی مجاز هستند:

function App() {
  const price = 120000;
  const isAvailable = true;

  return (
    <div>
      <p>قیمت: {price} تومان</p>
      <p>وضعیت: {isAvailable ? "موجود" : "ناموجود"}</p>
    </div>
  );
}

اما دستوراتی مانند if، for یا تعریف متغیر با const/let داخل آکولاد JSX مجاز نیستند، چون این‌ها Statement هستند نه Expression. برای منطق شرطی پیچیده‌تر، معمولاً یا از عملگر شرطی سه‌بخشی استفاده می‌شود یا محاسبه پیش از return انجام و نتیجه در یک متغیر ذخیره می‌شود.

مشکل: JSX فقط یک ریشه می‌پذیرد

همان‌طور که در درس قبل دیدیم، یک بلوک JSX باید دقیقاً یک عنصر ریشه داشته باشد. راه رایج برای رفع این محدودیت، قرار دادن همه‌چیز داخل یک <div> است. اما این کار همیشه ایده‌آل نیست، چون یک عنصر div اضافی و بدون معنا به ساختار HTML خروجی اضافه می‌کند.

Fragment: راه‌حل بدون عنصر اضافه

React برای حل همین مشکل، Fragment را ارائه می‌دهد. Fragment اجازه می‌دهد چند عنصر را گروه‌بندی کنیم، بدون اینکه هیچ عنصر واقعی اضافه‌ای به DOM اضافه شود.

import { Fragment } from "react";

function App() {
  return (
    <Fragment>
      <h2>عنوان</h2>
      <p>متن توضیحی</p>
    </Fragment>
  );
}

چون استفاده از Fragment بسیار رایج است، React یک نحو کوتاه‌شده به شکل <>...</> نیز برای آن فراهم کرده است:

function App() {
  return (
    <>
      <h2>عنوان</h2>
      <p>متن توضیحی</p>
    </>
  );
}

نکته مهم این است که نحو کوتاه <></> نمی‌تواند ویژگی (مانند key) بپذیرد؛ در مواردی که نیاز به تعیین key باشد (مثلاً هنگام رندر لیست‌ها)، باید از فرم کامل Fragment استفاده کرد.

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

نمایش Expression و استفاده از Fragment

function App() {
  const user = "علی";
  const score = 87;

  return (
    <>
      <h2>کارنامه</h2>
      <p>دانشجو: {user}</p>
      <p>نمره: {score}</p>
      <p>وضعیت: {score >= 60 ? "قبول" : "مردود"}</p>
    </>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

با قرار دادن یک Expression جاوااسکریپت داخل آکولاد، می‌توانیم مقادیر پویا را در JSX نمایش دهیم. همچنین برای گروه‌بندی چند عنصر بدون افزودن یک عنصر اضافه به DOM، از Fragment استفاده می‌کنیم. در درس بعدی به سراغ Function Componentها و نحوه دریافت داده از طریق Props می‌رویم.