از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
How to Loop in React JSXJavascript Syntax Extension (JSX)، یک پسوند جاوا اسکریپت است که توسط چارچوب React توسعه یافته و رایج شده است که به شما امکان می دهد رندر عناصر را ساختار دهید. این اساسا نوشتن کد HTML را در React آسان‌تر می‌کند (واسطه کاربری را توصیف کنید)، و به دلیل انعطاف‌پذیری آن، JSX توسط سایر محبوب‌ها به کار گرفته شده است.
سرفصلهای مطلب
پسوند نحوی جاوا اسکریپت (JSX)، یک برنامه افزودنی جاوا اسکریپت است که توسط شرکت توسعه یافته و رایج شده است چارچوب واکنش نشان می دهد که به شما امکان می دهد رندر عناصر را ساختار دهید. اساسا نوشتن کد HTML در React را آسان‌تر می‌کند (واسطه کاربری را توصیف کنید)، و به دلیل انعطاف‌پذیری آن، JSX توسط سایر فریم‌ورک‌های محبوب مانند Vue.js در طول سال‌ها مورد استفاده قرار گرفته است.
در این آموزش کوتاه نگاهی خواهیم داشت روش حلقه زدن در عناصر JSX واکنش نشان می دهد، با موارد زیر کار می کند todos آرایه:
const todos = (
{ id: 1, text: "Learn React", status: "completed" },
{ id: 2, text: "Do something", status: "incomplete" },
{ id: 3, text: "Do something else", status: "incomplete" },
);
در React JSX حلقه بزنید
این map() تابع معرفی شده در ES6 تنها روش ترجیحی برای حلقه زدن در JSX است:
{
todos.map((todo) => (
<p key={todo.id}>
{todo.text} - {todo.status}
</p>
));
}
برای هر عنصر در آرایه، آن را نگاشت می کنیم text و status فیلدها به محتوا در a <p> عنصر، که key به نقشه برداری می شود id رشته. این نتیجه نشانه گذاری زیر را ایجاد می کند:
<p>Learn React - completed</p>
<p>Do something - incomplete</p>
<p>Do something else - incomplete</p>
درک کردن کلید صفت
بسته به روی ابزار فریمورک/linting که استفاده می کنید، اگر از یک ابزار منحصر به فرد استفاده نمی کنید key ارزش برای هر کدام <p> عنصر، احتمالاً با یک هشدار مواجه خواهید شد:
Warning: Each child in a list should have a unique "key" prop
کلیدها در حلقه React به شناسایی مواردی که تغییر، اضافه یا حذف شده اند کمک می کند، و مهم است که عناصر والد را در یک حلقه قرار دهید. منحصر بفرد کلیدهایی برای کمک به دادن هویت پایدار به عنصر یا جزء.
مثل ما todos به عنوان مثال آرایه، ما می توانیم هر کار را مشخص کنیم id به عنوان کلید:
{
todos.map((todo) => (
<div key={todo.id}>
<p key={todo.text}>
{todo.text} - {todo.status}
</p>
</div>
));
}
اگر موردی که می‌خواهید به آن حلقه بزنید، عنصر منحصربه‌فرد، مانند منحصربه‌فرد، ندارد id – استفاده از آن یک قرارداد رایج است index توسط map() در عوض، برای هر عنصر تکرار شده، از شناسایی عنصر منحصر به فرد بدون تغییر مدل دامنه خود اطمینان حاصل کنید:
{
todos.map((todo, index) => (
<div key={index}>
<p key={todo.text}>
{todo.text} - {todo.status}
</p>
</div>
));
}
نتیجه
در این آموزش کوتاه، اصول حلقه زدن در React JSX، روش عملکرد کلیدها و همچنین روش افزودن یک کلید منحصر به فرد به عناصر تکرارپذیر را توضیح داده ایم.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-13 07:32:03
