מפה היא סוג איסוף נתונים שבו הנתונים מאוחסנים בצורה של זוגות. הוא מכיל מפתח ייחודי. יש למפות את הערך המאוחסן במפה למפתח. אנחנו לא יכולים לאחסן זוג כפול במפה(). זה בגלל הייחודיות של כל מפתח מאוחסן. הוא משמש בעיקר לחיפוש מהיר וחיפוש נתונים.
ב-React, ?מפה? שיטה המשמשת לחצות ולהציג רשימה של אובייקטים דומים של רכיב. מפה היא לא התכונה של 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, שיטת map() המשמשת עבור:
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; תְפוּקָה
