درج داده‌های دینامیک در JSX

مقدمه

قدرت واقعی JSX در توانایی آن برای ترکیب یکپارچه منطق جاوااسکریپت با ساختار UI نهفته است. شما می‌توانید هر عبارت (expression) معتبر جاوااسکریپت را مستقیماً در داخل JSX خود قرار دهید. این قابلیت به ما اجازه می‌دهد تا رابط‌های کاربری کاملاً پویا و داده-محور بسازیم.

استفاده از آکولاد {}

برای درج یک عبارت جاوااسکریپت در داخل JSX، کافیست آن را در داخل یک جفت آکولاد {} قرار دهید. React آن عبارت را ارزیابی کرده و نتیجه را در آن مکان از DOM رندر خواهد کرد.

نمایش مقادیر متغیرها

ساده‌ترین کاربرد، نمایش مقدار یک متغیر یا ثابت است.

JAVASCRIPT (React)

function UserInfo() {
  const firstName = 'Sara';
  const lastName = 'Connor';

  return (
    <div>
      <h1>Full Name: {firstName} {lastName}</h1>
    </div>
  );
}

در این مثال، مقادیر متغیرهای firstName و lastName در داخل تگ <h1> قرار گرفته و در نهایت خروجی "Full Name: Sara Connor" را تولید می‌کنند.

فراخوانی توابع

شما می‌توانید نتیجه فراخوانی یک تابع را نیز مستقیماً در JSX رندر کنید.

JAVASCRIPT (React)

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function Greeting() {
  const user = {
    firstName: 'John',
    lastName: 'Doe'
  };

  return (
    <h1>
      Hello, {formatName(user)}!
    </h1>
  );
}

در اینجا، تابع formatName فراخوانی شده و مقدار بازگشتی آن (رشته "John Doe") در داخل <h1> قرار می‌گیرد. این یک الگوی بسیار رایج برای سازماندهی منطق قالب‌بندی داده‌هاست.

استفاده از عبارات جاوااسکریپت در اتریبیوت‌ها

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

JAVASCRIPT (React)

function Profile() {
  const user = {
    name: 'Hedy Lamarr',
    imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
    imageSize: 90,
  };

  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
          borderRadius: '50%'
        }}
      />
    </>
  );
}

در این مثال، مقدار اتریبیوت src از user.imageUrl خوانده می‌شود. اتریبیوت style نیز یک شیء جاوااسکریپت را می‌پذیرد که در آن، نام پراپرتی‌های CSS به صورت camelCase نوشته شده‌اند.

توجه داشته باشید که تنها «عبارات» (expressions) جاوااسکریپت (کدی که یک مقدار را برمی‌گرداند) را می‌توان در داخل آکولادها قرار داد. شما نمی‌توانید «دستورات» (statements) مانند حلقه‌های for یا if-else را مستقیماً در JSX بنویسید. برای پیاده‌سازی منطق شرطی، از روش‌هایی مانند عملگر سه‌تایی (?:) یا عبارات منطقی (&&) استفاده می‌کنیم که در درس‌های آینده به آنها خواهیم پرداخت.

در این درس، با نحوه جان بخشیدن به کامپوننت‌های خود با استفاده از داده‌ها و منطق جاوااسکریپت آشنا شدیم. دیدیم که چگونه می‌توان با استفاده از آکولاد {}، عبارات جاوااسکریپت را هم در محتوای متنی و هم در اتریبیوت‌های JSX درج کرد. با این درس، فصل «مقدمه‌ای بر JSX» به پایان می‌رسد. شما اکنون پایه‌های لازم برای تعریف و ساخت UI در React را در اختیار دارید. در فصل بعدی، به «کامپوننت‌های تابعی» خواهیم پرداخت و با جزئیات بیشتری نحوه ساخت کامپوننت‌ها و ارسال داده بین آنها را بررسی خواهیم کرد.