Une carte est un type de collecte de données où les données sont stockées sous forme de paires. Il contient une clé unique. La valeur stockée dans la carte doit être mappée à la clé. Nous ne pouvons pas stocker une paire en double dans map(). Cela est dû au caractère unique de chaque clé stockée. Il est principalement utilisé pour rechercher et rechercher rapidement des données.
Dans React, la ?map? méthode utilisée pour parcourir et afficher une liste d’objets similaires d’un composant. Une carte n'est pas la fonctionnalité de React. Au lieu de cela, il s'agit de la fonction JavaScript standard qui peut être appelée sur n'importe quel tableau. La méthode map() crée un nouveau tableau en appelant une fonction fournie sur chaque élément du tableau appelant.
Exemple
Dans l'exemple donné, la fonction map() prend un tableau de nombres et double leurs valeurs. Nous attribuons le nouveau tableau renvoyé par map() à la variable doubleValue et le journalisons.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); Dans React, la méthode map() utilisée pour :
1. Traversée de l'élément de liste.
Exemple
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; Sortir
2. Traversée de l'élément de liste avec des clés.
obtenir la longueur du tableau en c
Exemple
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; Sortir
