الخريطة هي نوع من جمع البيانات حيث يتم تخزين البيانات في شكل أزواج. أنه يحتوي على مفتاح فريد من نوعه. يجب تعيين القيمة المخزنة في الخريطة إلى المفتاح. لا يمكننا تخزين زوج مكرر في الخريطة (). وذلك بسبب تفرد كل مفتاح مخزن. يتم استخدامه بشكل أساسي للبحث السريع والبحث عن البيانات.
في رد الفعل، 'الخريطة'؟ الطريقة المستخدمة لاجتياز وعرض قائمة بالكائنات المشابهة للمكون. الخريطة ليست من سمات React. بدلاً من ذلك، فهي وظيفة JavaScript القياسية التي يمكن استدعاؤها على أي مصفوفة. يقوم الأسلوب Map() بإنشاء مصفوفة جديدة عن طريق استدعاء دالة متوفرة على كل عنصر في مصفوفة الاستدعاء.
مثال
في المثال الموضح، تأخذ الدالة Map() مصفوفة من الأرقام وتضاعف قيمها. نقوم بتعيين المصفوفة الجديدة التي يتم إرجاعها بواسطة Map() إلى المتغير doubleValue ونقوم بتسجيله.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); في React، يتم استخدام طريقة الخريطة () من أجل:
1. اجتياز عنصر القائمة.
مثال
import React from 'react'; import ReactDOM from 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li> ); return ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = ['A', 'B', 'C', 'D', 'D']; ReactDOM.render( , document.getElementById('app') ); export default App; انتاج |
2. اجتياز عنصر القائمة بالمفاتيح.
مثال
import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('app') ); export default App; انتاج |
