الفرق بين المراجعتين لصفحة: «React/lists and keys»

مراجعة 11:11، 17 يوليو 2018

فلنتذكّر أولًا كيفيّة تحويل القوائم في JavaScript.

في المثال التالي سنستخدم الدالة map()‎ لمضاعفة قيم مصفوفة من الأرقام اسمها numbers، وسنُعيِّن المصفوفة الجديدة التي تُعيدها الدالة map()‎ إلى المتغير doubled ثم نعرض محتواه عبر التابع console.log()‎:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

نتيجة تنفيذ هذا المثال هي [2, 4, 6, 8, 10].

يكون تحويل المصفوفات في React إلى قوائم من العناصر مماثلًا تقريبا لذلك.

تصيير مكونات متعددة

بإمكانك بناء مجموعات من العناصر وتضمينها في JSX باستخدام الأقواس {}.

في المثال التالي سنستخدم الدالة map()‎ للمرور على جميع عناصر مصفوفة الأرقام numbers بحيث نُعيد عنصر <li> لكل عنصر من هذه المصفوفة. وأخيرا نُعيِّن مصفوفة العناصر الناتجة إلى المتغير listItems:

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:القوائم والمفاتيح}}</noinclude>
+فلنتذكّر أولًا كيفيّة تحويل القوائم في JavaScript.
+في المثال التالي سنستخدم الدالة  <code>[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map map()]</code>‎ لمضاعفة قيم مصفوفة من الأرقام اسمها <code>numbers</code>، وسنُعيِّن المصفوفة الجديدة التي تُعيدها الدالة <code>map()‎</code> إلى المتغير <code>doubled</code> ثم نعرض محتواه عبر التابع <code>console.log()</code>‎:<syntaxhighlight lang="javascript">
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map((number) => number * 2);
+console.log(doubled);
+</syntaxhighlight>نتيجة تنفيذ هذا المثال هي <code>[2, 4, 6, 8, 10]</code>.
+يكون تحويل المصفوفات في React إلى قوائم من العناصر مماثلًا تقريبا لذلك.
+== تصيير مكونات متعددة ==
+بإمكانك بناء مجموعات من العناصر وتضمينها في JSX باستخدام الأقواس <code>{}</code>.
+في المثال التالي سنستخدم الدالة <code>map()</code>‎ للمرور على جميع عناصر مصفوفة الأرقام <code>numbers</code> بحيث نُعيد عنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> لكل عنصر من هذه المصفوفة. وأخيرا نُعيِّن مصفوفة العناصر الناتجة إلى المتغير <code>listItems</code>: