خصیصه ها در JSX (JSX Attributes)

در این بخش می خواهیم ببینیم خصیصه ها در JSX چطور کار می کنند. خصیصه یعنی همان attribute های تگ ها؛ مثل کلاس، استایل و رویداد کلیک. در JSX ظاهرشان شبیه HTML است، اما چند قانون مهم دارد که اگر رعایت نکنی، سریع خطا می گیری.

تفاوت خصیصه ها در JSX با HTML معمولی

در HTML معمولی، مستقیما روی تگ ها attribute می نویسی؛ مثلا class یا style. در JSX هم همین کار را می کنی اما چون JSX در نهایت جاوااسکریپت است، بعضی کلمات در جاوااسکریپت رزرو هستند و باید شکلشان را تغییر دهی.

این جا می بینی مهم ترین تفاوت ها چیست: className به جای class، استفاده از عبارت جاوااسکریپت داخل آکولاد، نوشتن event ها با camelCase و فرستادن style به صورت یک شیء.

خصیصه ها در JSX و ماجرای className

در جاوااسکریپت، کلمه class برای تعریف کلاس استفاده می شود. به همین خاطر JSX اجازه نمی دهد از attribute به نام class استفاده کنی. به جای آن باید className بنویسی.

مثال: استفاده از className به جای class

function Car() {
  return (
    <h1 className="myclass">Hello World</h1>
  );
}

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

وقتی این JSX رندر می شود، ری اکت className را به class معمولی تبدیل می کند. پس در خروجی HTML نهایی همچنان یک کلاس عادی داری، فقط در کد JSX شکلش متفاوت است.

استفاده از عبارت ها برای مقدار خصیصه ها

حالا می رسیم به قسمت جذاب خصیصه ها در JSX. می توانی داخل مقدار attribute ها از عبارت جاوااسکریپت استفاده کنی. یعنی مقدار یک متغیر، نتیجه یک محاسبه یا هر عبارت معتبر را بدهی.

مثال: مقدار کلاس از روی متغیر

function Car() {
  const x = "myclass";
  return (
    <h1 className={x}>Hello World</h1>
  );
}

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

اینجا className داخل آکولاد است، چون می خواهیم از مقدار متغیر x استفاده کنیم. اگر به جای آکولاد، از کوتیشن معمولی استفاده می کردیم، خودش را یک رشته ثابت می دید، نه متغیر.

نکته: هر وقت از عبارت جاوااسکریپت برای مقدار خصیصه ها در JSX استفاده می کنی، حتما باید آن را داخل { } بگذاری، نه داخل کوتیشن ساده.

خصیصه های رویداد و نوشتن camelCase

event attribute یعنی خصیصه ای که روی رویداد کاربر واکنش نشان می دهد؛ مثل کلیک یا حرکت ماوس. در JSX این event ها را باید با حالت camelCase بنویسی؛ یعنی حروف وسطی بزرگ شوند.

مثال: رویداد کلیک با onClick

function Car() {
  const myfunc = () => {
    alert("Hello World");
  };
  return (
    <button onClick={myfunc}>Click me</button>
  );
}

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

در HTML معمولی می نویسی onclick، اما در JSX باید بنویسی onClick. همین قانون برای بقیه event ها هم هست؛ مثلا onSubmit، onChange و غیره.

خصیصه های بولی در JSX

خصیصه بولی (Boolean Attribute) یعنی خصیصه ای که فقط دو حالت دارد: درست یا نادرست؛ مثل disabled روی دکمه. JSX این خصیصه ها را کمی هوشمندتر مدیریت می کند.

مثال: مقدار true بدون نوشتن مقدار

<button onClick={myfunc} disabled>
  Click me
</button>

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

اینجا فقط disabled نوشته شده است. JSX این را به صورت true می فهمد، یعنی دکمه غیرفعال می شود. این دقیقا رفتاری شبیه HTML معمولی است.

مثال: true و false صریح برای خصیصه بولی

<button onClick={myfunc} disabled={true}>
  Click me
</button>

<button onClick={myfunc} disabled={false}>
  Click me
</button>

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

در دکمه اول disabled={true} است و دکمه غیرفعال می شود. در دکمه دوم disabled={false} است و دکمه فعال می ماند. این روش زمانی مفید است که مقدار disabled را از یک متغیر یا شرط بگیری.

خصیصه style و شیء جاوااسکریپت

در HTML، style را معمولا به شکل رشته CSS می نویسی. اما در JSX، خصیصه style فقط یک شیء جاوااسکریپتی قبول می کند. کلیدهای این شیء باید camelCase باشند، نه با خط تیره.

مثال: استفاده از شیء برای style

function Car() {
  const mystyles = {
    color: "red",
    fontSize: "20px",
    backgroundColor: "lightyellow",
  };
  return (
    <>
      <h1 style={mystyles}>My car</h1>
    </>
  );
}

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

دو چیز مهم اینجاست. اول اینکه تمام استایل ها در یک شیء جمع شده اند. دوم اینکه به جای font-size باید بنویسی fontSize و به جای background-color باید بنویسی backgroundColor.

نکته: این تفاوت در خصیصه ها در JSX خیلی مهم است، چون اگر dash بنویسی، کد دیگر یک اسم کلید معتبر در شیء جاوااسکریپت نخواهد بود.

اگر می خواهی درباره استایل دهی در ری اکت بیشتر بدانی، بعدا سراغ بخش استایل دهی در ری اکت (React CSS Styling) برو.

تمرین مرحله به مرحله روی خصیصه ها در JSX

برای اینکه خصیصه ها در JSX کامل جا بیفتد، این سه تمرین را انجام بده.

1. یک تگ h1 بساز و با استفاده از className، به آن یک کلاس ساده بده؛ مثلا "title".
2. همان مثال را عوض کن تا نام کلاس را از متغیر بخواند و مقدار کلاس را با عبارت JSX بدهد.
3. یک دکمه با خصیصه disabled بساز که مقدارش از یک متغیر بولی بیاید و با تغییر آن متغیر، فعال یا غیرفعال شود.

اگر هنوز با عبارت ها راحت نیستی، یک بار دیگر صفحه عبارت ها در JSX (JSX Expressions) را مرور کن تا ترکیب خصیصه و عبارت را بهتر درک کنی.

در ادامه مسیر هم می توانی بعد از خصیصه ها در JSX، سراغ شرط ها در JSX بروی و ببینی چطور با if یا سه تایی ظاهر عناصر را کنترل می کنیم.

جمع بندی سریع

• در JSX به جای class باید از className استفاده کنی.
• برای مقدار پویا، خصیصه ها را داخل آکولاد و با عبارت بنویس.
• event ها در JSX با camelCase نوشته می شوند؛ مثلا onClick.
• خصیصه های بولی بدون مقدار true هستند و با {false} غیرفعال می شوند.
• style در JSX یک شیء با کلیدهای camelCase است، نه رشته CSS.