آموزش Template Literal – استفاده داینامیک در JSX

گاهی در JSX می‌خواهیم مقدار را به صورت داینامیک بنویسیم. ( مثلا در className) برای این کار از Template Literal استفاده می‌کنیم.

Template Literal چیست؟

Template Literal یک روش مدرن در جاوااسکریپت برای نوشتن رشته‌ها است که با بک‌تیک ` مشخص می‌شود و به ما امکان می‌دهد تا متغیرها و عبارات را مستقیماً درون رشته قرار دهیم.

`مقدار متغیر: ${variable}`

شکل کلی استفاده در JSX

برای استفاده از Template Literal در ویژگی‌های JSX، به جای کوتیشن " " یا ' '، از بک‌تیک ` استفاده می‌کنیم:

className={`مقدار`}

چرا از Template Literal استفاده می‌کنیم؟

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

۱. ترکیب چند کلاس با هم

const baseClass = "box";
const isLarge = true;

<div className={`${baseClass} ${isLarge ? "large" : "small"}`}>
  محتوا
</div>

نتیجه در DOM:

• اگر isLarge برابر true باشد:

class="box large"

• اگر isLarge برابر false باشد:

class="box small"

۲. شرط‌سازی ساده کلاس‌ها

<div className={`box ${isActive ? "active" : ""}`}>
  محتوا
</div>

نتیجه در DOM:

• اگر isActive برابر true باشد:

className="box active"

• اگر isActive برابر false باشد:

className="box"

۳. ترکیب متن با متغیر

const name = "Ali";

<h1 className={`title-${name}`}>
  سلام {name}
</h1>

خروجی:

<h1 class="title-ali">سلام ali</h1>

بهترین شیوه‌ها در استفاده از Template Literal

۱. استفاده از classnames برای شرط‌های پیچیده

اگر تعداد کلاس‌های شرطی زیاد شد، از کتابخانه classnames استفاده کنید:

npm install classnames

import classNames from "classnames";

<div className={classNames("box", { active: isActive, disabled: isDisabled, large: size === "large" })}>
  محتوا
</div>

نکات مهم

• بک‌تیک ` را با کوتیشن " " اشتباه نکنید.
• درون ${} می‌توانید هر عبارت جاوااسکریپتی قرار دهید.
• برای استایل‌های style نیز می‌توان از Template Literal استفاده کرد:

<div style={{ backgroundColor: `#${colorCode}` }}>...</div>

جمع‌بندی

استفاده از Template Literal در JSX یکی از ابزارهای قدرتمند برای نوشتن کدهای داینامیک و خوانا در ری‌اکت است. این روش به شما امکان می‌دهد تا به راحتی کلاس‌ها، متن‌ها و ویژگی‌ها را بر اساس وضعیت کامپوننت تغییر دهید. برای پروژه‌های کوچک، همان Template Literal ساده کافی است؛ اما برای پروژه‌های بزرگتر، استفاده از کتابخانه‌هایی مانند classnames به مدیریت بهتر کد کمک می‌کند.