Comment utiliser la méthode map en réaction

Dans React, la méthode map est utilisée pour parcourir et afficher une liste d'objets similaires du composant ; la méthode map n'est pas unique pour réagir et peut appeler des fonctions JavaScript standard sur n'importe quel tableau. La méthode map est fournie en appelant chaque élément. de la fonction de tableau appelante pour créer un tableau.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Comment utiliser la méthode map dans React

map est un type de collecte de données dans lequel les données sont stockées sous forme de paires. Il contient une clé unique à laquelle les valeurs stockées dans la carte doivent être mappées. Nous ne pouvons pas stocker de paires en double dans map(), car chaque clé stockée est unique et elle est principalement utilisée pour rechercher et trouver rapidement des données.

Dans React, la méthode map est utilisée pour parcourir et afficher une liste d'objets similaires dans un composant. Map n'est pas spécifique à React, il s'agit plutôt d'une fonction JavaScript standard qui peut être appelée sur n'importe quel tableau. La méthode map() crée un nouveau tableau en appelant la fonction fournie sur chaque élément du tableau appelant.

Exemple

Dans l'exemple donné, la fonction map() accepte un tableau de nombres et double sa valeur, nous attribuons le nouveau tableau renvoyé par map() à la variable doubleValue et l'enregistrons.

var numbers = [1, 2, 3, 4, 5];   
const doubleValue = numbers.map((number)=>{   
    return (number * 2);   
});   
console.log(doubleValue);

Dans React, la méthode map() est utilisée pour :

1.

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 (  
    <div>  
          <h2>React Map例子</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );  
}  
const myLists = [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;D&#39;];   
ReactDOM.render(  
  <NameList myLists={myLists} />,  
  document.getElementById(&#39;app&#39;)  
);  
export default App;

2. Parcourez les éléments de la liste par clé.

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) =>  
    <ListItem key={number.toString()}  
              value={number} />  
  );  
  return (  
    <div>  
      <h2>React Map例子</h2>  
          <ul> {listItems} </ul>  
    </div>  
  );  
}  
  
const numbers = [1, 2, 3, 4, 5];  
ReactDOM.render(  
  <NumberList numbers={numbers} />,  
  document.getElementById(&#39;app&#39;)  
);

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!