الفرق بين المراجعتين ل"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: