반응에서 맵 메소드를 사용하는 방법

반응에서 맵 메서드는 구성 요소의 유사한 개체 목록을 탐색하고 표시하는 데 사용됩니다. 맵 메서드는 반응에 고유하지 않으며 모든 배열에서 표준 JavaScript 함수를 호출할 수 있습니다. 맵 메서드는 각 요소를 호출하여 제공됩니다. 호출하는 배열 함수의 배열을 생성합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

리액트에서 map 메소드를 사용하는 방법

map은 데이터가 쌍(pair) 형태로 저장되는 데이터 수집형입니다. 여기에는 맵에 저장된 값을 매핑해야 하는 고유 키가 포함되어 있습니다. map()에는 중복 쌍을 저장할 수 없습니다. 이는 저장된 각 키가 고유하고 주로 빠른 검색 및 데이터 찾기에 사용되기 때문입니다.

React에서 map 메소드는 구성 요소의 유사한 객체 목록을 탐색하고 표시하는 데 사용됩니다. Map은 React에만 국한되지 않고 모든 배열에서 호출할 수 있는 표준 JavaScript 함수입니다. map() 메서드는 호출 배열의 각 요소에 대해 제공된 함수를 호출하여 새 배열을 만듭니다.

예제

주어진 예에서 map() 함수는 숫자 배열을 받아들이고 그 값을 두 배로 늘립니다. map()이 반환한 새 배열을 doubleValue 변수에 할당하고 이를 기록합니다.

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

React에서 map() 메서드는 다음 용도로 사용됩니다.

1.

Example

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. 키별로 목록 요소를 탐색합니다.

예

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

[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]

위 내용은 반응에서 맵 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!