استفاده از جاوااسکریپت در JSX با آکولااد

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

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

• تفاوت پاس دادن رشته‌های ثابت با علامت کوتیشن و متغیرها با آکولااد

• نحوه ارجاع به متغیرها و توابع جاوااسکریپت درون JSX

• مفهوم «آکولااد دوبل» {{ }} برای پاس دادن استایل‌ها و اشیاء (Objects)

۱. پاس دادن رشته‌ها با کوتیشن در برابر آکولااد

وقتی می‌خواهید یک ویژگی (Attribute) ثابت و متنی را به JSX پاس دهید، آن را داخل کوتیشن تک یا جفت ("" یا '') می‌گذارید:

export default function Avatar() {
  return (
    <img
      className="avatar" // یک رشته ثابت برای نام کلاس CSS
      src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

اما اگر بخواهید آدرس عکس (src) یا متن جایگزین (alt) را به صورت پویا و از طریق متغیرها تعیین کنید، باید کوتیشن‌ها را حذف کرده و از آکولااد { } استفاده کنید:

export default function Avatar() {
  const avatar = 'https://react.dev/images/docs/scientists/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  
  return (
    <img
      className="avatar"
      src={avatar} // خواندن مقدار متغیر avatar از دنیای جاوااسکریپت
      alt={description}
    />
  );
}

۲. آکولااد: پنجره‌ای رو به دنیای جاوااسکریپت

هر عبارت یا بیان جاوااسکریپتی (JavaScript Expression) که مقدار مشخصی تولید کند، درون آکولاادهای JSX قابل اجراست. این عبارت می‌تواند یک متغیر ساده، یک عملیات ریاضی یا حتی یک تابع باشد.

نمایش متغیرها و فراخوانی توابع:

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat('fa-IR', { weekday: 'long' }).format(date);
}

export default function TodoList() {
  const name = 'گریگوری زارا';
  
  return (
    <>
      {/* ارجاع به یک متغیر متنی ساده */}
      <h1>لیست کارهای {name}</h1>
      
      {/* فراخوانی یک تابع جاوااسکریپتی و نمایش خروجی آن */}
      <p>برنامه روز: {formatDate(today)}</p>
    </>
  );
}

⚠️ کجا مجاز به استفاده از آکولااد هستیم؟

شما فقط به دو روش می‌توانید از آکولااد درون JSX استفاده کنید:

1. به عنوان متن مستقیم درون یک تگ: مثل <h1>{name}</h1>. (نوشتن کدهایی مثل <{tag}> مجاز نیست).

2. به عنوان مقدار یک ویژگی دقیقاً بعد از علامت =: مثل src={avatar}. (نوشتن کدهایی مثل src="{avatar}" اشتباه است؛ چون این کار صرفاً متنِ ثابت "{avatar}" را به مرورگر پاس می‌دهد).

۳. راز آکولااد دوبل {{ }} چیست؟

توسعه‌دهندگان تازه‌کار با دیدن ساختار {{ }} در کدهای استایل‌دهی راکت دچار سردرگمی می‌شوند. حقیقت این است که این یک سینتکس خاص یا جدید نیست!

همان‌طور که گفتیم، آکولااد اول { } پنجره ورود به جاوااسکریپت است. از طرفی، اشیاء (Objects) در جاوااسکریپت با آکولااد تعریف می‌شوند (مثل { color: 'pink' }). بنابراین وقتی می‌خواهید یک شیء جاوااسکریپتی را به ویژگی style در راکت پاس دهید، این دو آکولااد در کنار هم قرار می‌گیرند:

export default function TodoList() {
  return (
    // آکولااد بیرونی = پنجره جاوااسکریپت | آکولااد داخلی = شیء استایل
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>بهبود ویدیوئوفون</li>
      <li>آماده‌سازی لکچرهای هوانوردی</li>
    </ul>
  );
}

اگر کدهای بالا را به این شکل بنویسید، منطق جاوااسکریپتی آن را واضح‌تر درک خواهید کرد:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

⚠️ تله شتری‌نویسی در استایل‌ها: در ساختار استایل‌های داخلی (Inline Styles) راکت، تمام ویژگی‌های CSS باید به صورت camelCase نوشته شوند. برای مثال، ساختار متداول HTML یعنی style="background-color: black" در راکت تبدیل به style={{ backgroundColor: 'black' }} می‌شود.

ترکیب داده‌ها در قالب یک شیء واحد

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

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}> {/* اعمال شیء استایل */}
      <h1>کارهای روزمره {person.name}</h1> {/* دسترسی به رشته نام */}
      <img
        className="avatar"
        src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"
        alt={person.name}
      />
    </div>
  );
}

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

• ویژگی‌هایی که داخل کوتیشن قرار می‌گیرند، به عنوان رشته ثابت پاس داده می‌شوند.

• آکولااد { } ابزار تزریق متغیرها، توابع و منطق جاوااسکریپت به درون کدهای ظاهر (Markup) است.

• آکولاادها فقط درون تگ‌ها به عنوان متن یا بلافاصله بعد از علامت = در ویژگی‌ها کار می‌کنند.

• ساختار {{ }} یک ویژگی جادویی نیست؛ بلکه صرفاً قرار گرفتن یک شیء جاوااسکریپتی درون آکولااد JSX است.