في هذا القسم، سنستخدم مصفوفة لشرح حلقة الوصول الأصلية في العرض. لهذا، قمنا بوصف مثال لمصفوفة حلقة التفاعل في التصيير. عندما نريد إنشاء أي تطبيق ويب، فمن المهم جدًا أن تكون لدينا المعرفة اللازمة للتعامل مع مجموعة من البيانات. في هذا المثال، سنرى استخدام حلقة in رد فعل شبيبة . في مثالنا المذكور، سنستخدم حلقة for في React js. للقيام بذلك، علينا أن نتبع بعض الخطوات.
في هذا القسم، سوف نستخدم تطبيق رد الفعل. عندما نحتاج إلى خريطة، وحلقة foreach، وحلقة for في رد الفعل، يمكننا أن ننظر إلى المثال التالي لمعرفة استخدام مصفوفة حلقة n رد فعل js. في المصفوفة، نريد دائمًا حلقة for وforeach. عندما نريد جعل المصفوفة في متناول أيدينا، فسوف يتطلب الأمر خريطة للقيام بذلك. لذلك سنقوم بشرح مثال الخريطة في React Native. يتم إنشاء مصفوفة جديدة بواسطة طريقة الخريطة (). في مصفوفة الاستدعاء، يوفر نتيجة استدعاء دالة على كل عنصر. يمكن تبسيط عملية التكرار من خلال هذا. عندما نستخدم الخريطة، لا نطلب استخدام دالة forEach وحلقة for. الخريطة، حلقة forEach، حلقة for لها العديد من الاختلافات. بدلاً من الكتابة فوق البيانات الموجودة، تستخدم وظيفة الخريطة البيانات وتقوم بإنشاء مصفوفة جديدة. نظرًا لجميع الميزات وبساطة وظيفة الخريطة، تشجعنا مستندات React بشدة على استخدام وظيفة الخريطة.
سنقدم مثالين في تطبيق التفاعل لشرح هذا المفهوم السهل. في المثال الأول، سنقوم بوصف حلقة التفاعل، التي تحتوي على مصفوفة أحادية البعد. في المثال الثاني، سوف نقوم بوصف حلقة تحتوي على مصفوفة متعددة الأبعاد. كلا المثالين هما كما يلي:
مثال 1:
RC/App.js
import React from 'react'; function App() { const myArray = ['Jack', 'Mary', 'John', 'Krish', 'Navin']; return ( <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> {students.map((student, index) => ( <tr> <td>{student.id}</td> <td>{student.name}</td> <td>{student.email}</td> </tr> ))} </table> ); } export default App; بعد تشغيل هذا المثال، سنحصل على المعاينة التالية:
