الفرق بين المراجعتين ل"React/lists and keys"
< React
اذهب إلى التنقل
اذهب إلى البحث
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:القوائم والمفاتيح}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:القوائم والمفاتيح}}</noinclude> | <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>: |
مراجعة 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
: