كيفية استخدام طريقة الخريطة في رد الفعل

في التفاعل، يتم استخدام أسلوب الخريطة لاجتياز وعرض قائمة بالكائنات المتشابهة للمكون؛ أسلوب الخريطة ليس فريدًا للتفاعل ويمكنه استدعاء وظائف JavaScript القياسية على أي مصفوفة مصفوفة الاستدعاء لإنشاء مصفوفة.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار التفاعل 17.0.1، كمبيوتر Dell G3.

كيفية استخدام طريقة الخريطة في رد الفعل

الخريطة هي نوع من جمع البيانات حيث يتم تخزين البيانات في شكل أزواج. يحتوي على مفتاح فريد يجب تعيين القيم المخزنة في الخريطة عليه. لا يمكننا تخزين أزواج مكررة في الخريطة ()، وذلك لأن كل مفتاح مخزن فريد من نوعه ويستخدم بشكل أساسي للبحث السريع والعثور على البيانات.

في React، يتم استخدام التابع Map لتكرار وعرض قائمة بالكائنات المتشابهة في خريطة مكون ليست خاصة بـ React، بل هي وظيفة JavaScript قياسية يمكن استدعاؤها على أي مصفوفة. يقوم الأسلوب Map() بإنشاء مصفوفة جديدة عن طريق استدعاء الوظيفة المتوفرة على كل عنصر في مصفوفة الاستدعاء.

مثال

في المثال الموضح، تقبل الدالة Map() مصفوفة من الأرقام وتضاعف قيمتها، ونقوم بتعيين المصفوفة الجديدة التي يتم إرجاعها بواسطة Map() إلى المتغير doubleValue ونسجله.

أرقام فار = [1، 2، 3، 4، 5]؛ const doubleValue = Numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue);

في React، يتم استخدام طريقة الخريطة () من أجل:

1. اجتياز عناصر القائمة.

مثال

import React from 'react'; import ReactDOM من 'react-dom'; function NameList(props) { const myLists =props.myLists; > ); , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );

2. اجتياز عناصر القائمة عن طريق المفتاح.

مثال

استيراد React من 'react'؛ استيراد ReactDOM من 'react-dom'؛ const listItems = Numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <div> <h2>مثال لخريطة التفاعل</h2> <ul> {listItems} </ul> </div> } أرقام ثابتة = [1, 2, 3, 4, 5]; )));