عرض القوائم باستخدام JSX في React.

 

عرض القوائم باستخدام JSX

في React، ستعتمد على ميزات JavaScript مثل الحلقة for ودالة map() الخاصة بالمصفوفات لعرض قوائم من المكونات.

على سبيل المثال، لنفترض أن لديك مصفوفة من المنتجات:

const products = [   { title: 'Cabbage', id: 1 },   { title: 'Garlic', id: 2 },   { title: 'Apple', id: 3 }, ];

داخل المكون الخاص بك، استخدم دالة map() لتحويل مصفوفة المنتجات إلى مصفوفة من عناصر <li>:

const listItems = products.map(product =>   <li key={product.id}>     {product.title}   </li> ); return (   <ul>{listItems}</ul> );

لاحظ كيف أن <li> يحتوي على خاصية key. لكل عنصر في القائمة، يجب أن تمرر سلسلة نصية أو رقمًا يحدد هذا العنصر بشكل فريد بين إخوته. عادةً، يجب أن يأتي المفتاح من بياناتك، مثل معرف قاعدة البيانات. يستخدم React مفاتيحك لمعرفة ما حدث إذا قمت بإدراج أو حذف أو إعادة ترتيب العناصر لاحقًا.

مثال كامل:

const products = [   { title: 'Cabbage', isFruit: false, id: 1 },   { title: 'Garlic', isFruit: false, id: 2 },   { title: 'Apple', isFruit: true, id: 3 }, ]; export default function ShoppingList() {   const listItems = products.map(product =>     <li       key={product.id}       style={{         color: product.isFruit ? 'magenta' : 'darkgreen'       }}     >       {product.title}     </li>   );   return (     <ul>{listItems}</ul>   ); }

في هذا المثال، نستخدم خاصية style لتحديد لون النص بناءً على ما إذا كان المنتج فاكهة أم لا.