Sử dụng Map trong React – w3seo hướng dẫn sử dung Map React

Posted on by mtoplistChuyên mục:Top List

Rate this post

Map là một kiểu thu thập dữ liệu trong đó dữ liệu được lưu trữ dưới dạng các cặp. Nó chứa một khóa duy nhất. Giá trị được lưu trữ trong Map phải được ánh xạ tới khóa. Chúng tôi không thể lưu trữ một cặp trùng lặp trong Map (). Đó là vì tính duy nhất của mỗi khóa được lưu trữ. Nó chủ yếu được sử dụng để tìm kiếm và tra cứu dữ liệu nhanh chóng.

Các bài viết liên quan:

Trong React, Map? phương thức được sử dụng để duyệt và hiển thị danh sách các đối tượng tương tự của một thành phần. Map không phải là tính năng của React. Thay vào đó, nó là hàm JavaScript tiêu chuẩn có thể được gọi trên bất kỳ mảng nào. Phương thức map () tạo một mảng mới bằng cách gọi một hàm được cung cấp trên mọi phần tử trong mảng đang gọi.

Ví dụ

Trong ví dụ đã cho, hàm map () nhận một mảng số và nhân đôi giá trị của chúng. Chúng tôi gán mảng mới được trả về bởi map () cho biến doubleValue và ghi lại nó.

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

Trong React, phương thức map () được sử dụng để:

  1. Duyệt qua phần tử danh sách.

Ví dụ

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 Example</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );  
}  
const myLists = ['item1', 'item2', 'item3', 'item4', 'item15'];   
ReactDOM.render(  
  <NameList myLists={myLists} />,  
  document.getElementById('app')  
);  
export default App;
  1. Duyệt qua phần tử danh sách bằng các phím.

Ví dụ

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 Example</h2>  
          <ul> {listItems} </ul>  
    </div>  
  );  
}  
  
const numbers = [10, 20, 30, 40, 50];  
ReactDOM.render(  
  <NumberList numbers={numbers} />,  
  document.getElementById('app')  
);  
export default App;

mtoplist