0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

چطور داخل React JS حلقه loop بزنیم؟

How to loop in React JS?

من تازه کار با ری‌اکت رو شروع کردم و یه مشکلی دارم. می‌خوام داخل فایل JSX یک حلقه بزنم و چند تا عنصر رو به صورت پویا رندر کنم، اما نمی‌دونم بهترین روش چیه. می تونید راهنمایی کنید که چطور می‌شه داخل JSX حلقه زد و خروجی رو رندر کرد؟ مثلاً فرض کنید یه آرایه دارم که می‌خوام تک تک آیتم‌هاش رو به عنوان یه لیست نشون بدم. ممنونم!

1403/05/31
پاسخ
محمدامین سعیدی راد
بیوگرافی محمدامین سعیدی راد

سلام! خوش اومدی به دنیای ری‌اکت. برای اینکه داخل JSX یه حلقه بزنی و چند تا عنصر رو به صورت پویا رندر کنی، می‌تونی از متد map() جاوااسکریپت استفاده کنی. این متد روی هر آیتم یک آرایه کار می‌کنه و می‌تونه برای هر آیتم یک کامپوننت JSX برگردونه.

فرض کن یه آرایه داری به نام items و می‌خوای این‌ها رو به صورت لیست نمایش بدی. کد زیر رو می‌تونی استفاده کنی:

const items = ['Item 1', 'Item 2', 'Item 3'];
function MyComponent() {
 return (
   <ul> 
    {items.map((item, index) => ( <li key={index}>{item}</li> ))} 
   </ul> 
 ); 
}

توی این کد:

  • items.map((item, index) => (...)) روی هر آیتم در آرایه items کار می‌کنه.
  • توی map، برای هر آیتم یک عنصر <li> ساخته می‌شه که شامل متن همون آیتمه.
  • key={index} هم یک ویژگی مخصوص ری‌اکته که بهش کمک می‌کنه تا تغییرات رو بهینه مدیریت کنه؛ بهتره که کلید (key) یکتا باشه، مثلاً با استفاده از آیتم‌های منحصر به فرد آرایه.

این روش نه تنها ساده و تمیزه، بلکه کاملاً استاندارد و بهترین روش برای این کاره. امیدوارم کمکت کنه!

پاسخ: 1403/05/31
آخرین آپدیت: 1403/07/21