رندر لیست‌ها در React – استفاده از map و JSX برای نمایش داده‌های پویا

مقدمه

در جاوااسکریپت، داده‌ها اغلب به‌صورت آرایه‌ای از آبجکت‌ها هستند. در React نیز برای نمایش این داده‌ها، از متد map() استفاده می‌کنیم تا هر آیتم به یک عنصر JSX تبدیل شود.

استفاده از map برای رندر لیست

const list = [
  {
    title: 'React',
    url: 'https://react.dev/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://redux.js.org/',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
];

رندر اولیه فقط با عنوان:

function App() {
  return (
    

      {list.map(function (item) {
        return 
{item.title}
;
      })}
    
  );
}

در اینجا، هر آیتم از لیست به یک عنصر <li> تبدیل شده است.

استفاده از ویژگی key

React برای بهینه‌سازی رندر مجدد لیست‌ها، نیاز به ویژگی key دارد. این ویژگی باید مقدار یکتایی مانند objectID باشد:

{list.map(function (item) {
  return 
{item.title}
;
})}

در صورت نبود شناسه یکتا، می‌توان از index استفاده کرد، اما فقط به‌عنوان آخرین راه‌حل.

نمایش اطلاعات کامل هر آیتم

می‌توان اطلاعات بیشتری از هر آیتم را نمایش داد، مانند لینک، نویسنده، تعداد نظرات و امتیاز:

{list.map(function (item) {
  return (
    

      
        {item.title}
      
      {item.author}
      {item.num_comments}
      {item.points}
    
  );
})}

نکات JSX در لیست‌ها

• می‌توان از توابع، متغیرها و ساختارهای داده درون JSX استفاده کرد.
• ویژگی‌های HTML مانند href می‌توانند به‌صورت داینامیک از داده‌ها مقدار بگیرند.
• برای کامنت‌گذاری در JSX از {/* comment */} استفاده می‌شود.

جمع‌بندی

استفاده از map() برای رندر لیست‌ها در React یکی از قدرتمندترین قابلیت‌های JSX است. با استفاده از آن می‌توان داده‌های پویا را به‌سادگی به عناصر HTML تبدیل کرد و رابط‌های کاربری تعاملی ساخت. ویژگی key نیز برای بهینه‌سازی عملکرد و جلوگیری از خطاهای رندر ضروری است.