Cara menggunakan kaedah peta sebagai tindak balas

Sebagai tindak balas, kaedah peta digunakan untuk merentasi dan memaparkan senarai objek yang serupa bagi komponen tersebut; kaedah peta tidak unik untuk bertindak balas dan boleh memanggil fungsi JavaScript standard pada mana-mana tatasusunan elemen tatasusunan Panggil fungsi yang disediakan untuk mencipta tatasusunan dengan elemen.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Cara menggunakan kaedah peta secara bertindak balas

Peta ialah jenis pengumpulan data di mana data disimpan dalam bentuk pasangan. Ia mengandungi kunci unik yang mana nilai yang disimpan dalam peta mesti dipetakan. Kami tidak boleh menyimpan pasangan pendua dalam map(), ini kerana setiap kunci yang disimpan adalah unik dan ia digunakan terutamanya untuk carian pantas dan mencari data.

Dalam React, kaedah peta digunakan untuk melintasi dan memaparkan senarai objek yang serupa dalam komponen Map bukan khusus untuk React Sebaliknya, ia adalah fungsi JavaScript standard yang boleh dipanggil pada mana-mana tatasusunan. Kaedah map() mencipta tatasusunan baharu dengan memanggil fungsi yang disediakan pada setiap elemen dalam tatasusunan panggilan.

Contoh

Dalam contoh yang diberikan, fungsi map() menerima tatasusunan nombor dan menggandakan nilainya, kami memperuntukkan tatasusunan baharu yang dikembalikan oleh map() Berikan pembolehubah doubleValue dan log ia.

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

Dalam React, kaedah map() digunakan untuk:

1.

Contoh

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.

Contoh

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

[Pengesyoran berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Cara menggunakan kaedah peta sebagai tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!