So verwenden Sie die Kartenmethode in React

In React wird die Map-Methode zum Durchlaufen und Anzeigen einer Liste ähnlicher Objekte der Komponente verwendet. Die Map-Methode ist nicht eindeutig für die Reaktion und kann Standard-JavaScript-Funktionen für jedes Array aufrufen. Die Map-Methode wird durch Aufrufen jedes Elements bereitgestellt der aufrufenden Array-Funktion, um ein Array zu erstellen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

So verwenden Sie die Kartenmethode in React

Karte ist ein Datenerfassungstyp, bei dem Daten in Form von Paaren gespeichert werden. Es enthält einen eindeutigen Schlüssel, dem die in der Karte gespeicherten Werte zugeordnet werden müssen. Wir können in map() keine doppelten Paare speichern, da jeder gespeicherte Schlüssel einzigartig ist und hauptsächlich zum schnellen Suchen und Finden von Daten verwendet wird.

In React wird die Map-Methode zum Durchlaufen und Anzeigen einer Liste ähnlicher Objekte in einer Komponente verwendet. Map ist nicht spezifisch für React, sondern eine Standard-JavaScript-Funktion, die für jedes Array aufgerufen werden kann. Die Methode „map()“ erstellt ein neues Array, indem sie die bereitgestellte Funktion für jedes Element im aufrufenden Array aufruft.

Beispiel

Im gegebenen Beispiel akzeptiert die Funktion „map()“ ein Array von Zahlen und verdoppelt seinen Wert. Wir weisen das von „map()“ zurückgegebene neue Array der Variablen „doubleValue“ zu und zeichnen es auf.

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

In React wird die Methode map() verwendet für:

1.

Beispiel

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. Durchlaufen Sie Listenelemente nach Schlüssel.

Beispiel

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;)  
);

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Kartenmethode in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!