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

mohsen•1 ماه قبل
ارسال شده در
react/docs/v19

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

پاس دادن رشته‌ها با علامت نقل قول (کوتیشن)

زمانی که بخواهید یک مقدار از نوع رشته را به ویژگی ای در JSX اختصاص دهید، باید آرن را بین دو علامت کوتیشین تکی یا دوتایی قرار دهید:

      export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

در اینجا، مقدار "https://i.imgur.com/7vQD0fPs.jpg" و "Gregorio Y. Zara" به عنوان رشته‌ها به ویژگی های اختصاص داده می شود.

اما اگر بخواهید متن src یا alt را به‌صورت داینامیک مشخص کنید چه کار باید بکنید؟ برای این کار می توانید یک عبارت جاوا اسکریپت را به جای قرار دادن بین کوتیشن، بین آکولاد باز و بسته ( :

      export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

به تفاوت بین className="avatar" با دو ویژگی دیگر توجه کنید، این ویژگی کلاس "avatar" را به ویژگی اختصاص می دهد و ولی عبارت src={avatar} مقدار متغیر avatar را خوانده به ویژگی src اختصاص می دهد. این به دلیلاستفاده از آکولادهاست که باعث استفاده از جاوا اسکریپت در JSX می شود.

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

تکنولوژی JSX یک روش خاص برای نوشتن جاوا اسکریپت است. این یعنی می‌توانید از جاوا اسکریپت در JSX استفاده کنید —با استفاده از آکولادها { }. مثال زیر ابتدا نامی برای یک دانشمند، با متغیر name، تعریف می کند و سپس آن را بوسیله آکولادها درون تگ <h1> نمایش می دهد:

      export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

سعی کنید مقدار name را از 'Gregorio Y. Zara' به 'Hedy Lamarr' تغییر دهید و ببینید عنوان لیست چه تغییری می کند؟

هر عبارت جاوا اسکریپتی که بین آکولادها قرار دهید مقدارش نمایش داده می شود، از جمله فراخوانی توابع. برای مثال در کد زیر تابع formatDate() فراخوانی کرده ایم:

      const today = new Date();

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

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

مشاهده نتیجه اجرای کد بالا در CodeSandBox

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

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

  • به عنوان متن به طور مستقیم بین تگ آغاز و پایان یک تگ: برای مثال کد <h1>{name}'s To Do List</h1> کار می‌کند، اما این کد <{tag}>Gregorio Y. Zara's To Do List</{tag}> کار نمی‌کند.
  • به عنوان ویژگی‌ها بلافاصله پس از علامت =: دستور src={avatar} مقدار متغیر avatar به ویژگی src اختصاص می دهد ، اما دستور src="{avatar}" رشته "{avatar}" را به این ویژگی اختصاصا می دهد.

استفاده از "آکولادهای دوتایی": کاربرد در CSS و سایر اشیا در JSX

علاوه بر رشته‌ها، اعداد و دیگر عبارات جاوا اسکریپت، از اشیا نیز برای مقدار دهی در JSX می توانید استفاده کنید. اشیا نیز در جاوااسکریپت با آکولادها مشخص می‌شوند، مانند { name: "Hedy Lamarr", inventions: 5 }. بنابراین، برای پاس دادن یک شی جاوااسکریپت به JSX، باید شی را در یک جفت آکولاد دیگر قرار دهید: مانند person={{ name: "Hedy Lamarr", inventions: 5 }}.

ممکن است این روش را با استایل دهی CSS به المان ها در JSX مشاهده کنید. ری اکت شما را مجبور به استفاده از استایل دهی درون خطی به المان ها نمی کند (کلاس‌های CSS برای بیشتر موارد گزینه مناسبی هستند). اما وقتی به یک استایل درون‌خطی نیاز دارید، باید ویژگی style را با یک شی مقدار دهی کنید:

      export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

مشاهده نتیجه اجرای کد بالا در CodeSandBox

سعی کنید مقادیر backgroundColor و color را در کد بالا تغییر دهید.

اگر بخواهید شی جاوااسکریپتی که را که در آکولادهای JSX محصور شده ببینید کافی است کدتان را به صورت زیر اصلاح کنید:

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

بار بعدی که {{ و }} را در JSX دیدید، می دانید که سینتکس چیزی جز شی جاوااسکریپتی درون آکولادهای JSX نیست!

نکته: خواص style درون‌خطی به صورت camelCase نوشته می‌شوند. برای مثال، برای این نحوه نوشتن <ul style="background-color: black"> باید به این صورت <ul 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}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

در کد بالا شی شخص شامل ویژگی theme است که خود یک شی جاوااسکریپت است و برای استایل دهی به المان div از مقدار ویژگی theme شی شخص استفاده شده است:

      const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};
    
      <div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

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

جمع بندی

حالا تقریباً همه چیز را درباره JSX می‌دانید:

  • مقدار ویژگی‌های JSX که بین علامت کوتیشن قرار گرفته اند به عنوان رشته در نظر گرفته می‌شوند.
  • آکولادها به شما اجازه ورود منطق و متغیرهای جاوا اسکریپت را به کدهای JSX می دهند.
  • آنها در بین تگ آغاز و پایان یا بلافاصله بعد از علامت = در تگ شروع برای مقدار دهی ویژگی‌ها قابل استفاده هستند.
  • شکل {{ و }} دستوری خاص نیست: بلکه یک شی جاوا اسکریپت است که درون آکولادهای JSX قرار دارد.

چالش ها

1. چالش اصلاح خطا

کد زیر خطای Objects are not valid as a React child را نمایش می دهد:

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}
    
      Error
Objects are not valid as a React child (found: object with keys {name, theme}). If you meant to render a collection of children, use an array instead.

آیا می‌توانید مشکل را پیدا کنید؟

راهنمایی: به آنچه درون آکولادها قرار دارد نگاه کنید. آیا عبارت درستی را آنجا قرار داده ایم؟

2. افزودن اطلاعات به شی

URL تصویر را به شی person اضافه کرده و مقدارش را جایگزین کنید:

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

3. نوشتن یک عبارت درون آکولادهای JSX

در شی زیر، آدرس کامل تصویر به چهار بخش: URL پایه، imageId، imageSize و پسوند فایل تقسیم شده است.

ما می‌خواهیم مقدار src تگ تصویر را با متصل کردن این مقادیر بسازیم: URL پایه (همیشه 'https://i.imgur.com/')، imageId ('7vQD0fP')، imageSize ('s') و پسوند فایل (همیشه '.jpg'). با این حال، چیزی با نحوه مشخص کردن src در تگ <img> اشتباه است.

آیا می‌توانید آن را اصلاح کنید؟

      
const baseUrl = 'https://i.imgur.com/';
const person = {
  name: 'Gregorio Y. Zara',
  imageId: '7vQD0fP',
  imageSize: 's',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="{baseUrl}{person.imageId}{person.imageSize}.jpg"
        alt={person.name}
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

برای بررسی صحت جوابتان، سعی کنید مقدار imageSize را به 'b' تغییر دهید. تصویر باید پس از ویرایش تغییر اندازه دهد.

راه حل چالش ها

1. چالش رفع خطا

این مشکل بدلیل استفاده از خود شی شخص <h1>{person}'s Todos</h1> به جای یک رشته، رخ داده است! استفاده از مقادیر اشیا به جای محتوای متنی باعث ایجاد خطا می‌شود زیرا ری اکت نحوه نمایش شی استفاده شده را نمی داند. برای اصلاح آن، عبارت <h1>{person}'s Todos</h1> را باید با <h1>{person.name}'s Todos</h1> جایگزین کنید:

      const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};
export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

2. افزودن اطلاعات به شی

برای URL تصویر یک ویژگی به نام person.imageUrl تعریف می کنیم و در تگ <img> با استفاده از آکولادها مقدار مورد نظر را نمایش می دهیم:

      const person = {
  name: 'Gregorio Y. Zara',
  imageUrl: "https://i.imgur.com/7vQD0fPs.jpg",
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};
export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src={person.imageUrl}
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

3. استفاده از عبارت داخل آکولادهای JSX

برای این کار عبارت را باید به صورت src={baseUrl + person.imageId + person.imageSize + '.jpg'} بنویسید.

  • { عبارت جاوا اسکریپت را شروع می‌کند
  • baseUrl + person.imageId + person.imageSize + '.jpg' رشته URL را تولید می‌کند
  • } عبارت جاوا اسکریپت را پایان می دهد
      const baseUrl = 'https://i.imgur.com/';
const person = {
  name: 'Gregorio Y. Zara',
  imageId: '7vQD0fP',
  imageSize: 's',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src={baseUrl + person.imageId + person.imageSize + '.jpg'}
        alt={person.name}
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

همچنین می‌توانید این عبارت را به یک تابع جداگانه مانند getImageUrl در کد زیر انتقال دهید:

      import { getImageUrl } from './utils.js'

const person = {
  name: 'Gregorio Y. Zara',
  imageId: '7vQD0fP',
  imageSize: 's',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src={getImageUrl(person)}
        alt={person.name}
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}
    
      export function getImageUrl(person) {
  return (
    'https://i.imgur.com/' +
    person.imageId +
    person.imageSize +
    '.jpg'
  );
}

متغیرها و توابع می‌توانند به شما کمک کنند نشانه‌گذاری را ساده نگه دارید!

رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!