반응 순회 방법은 무엇입니까?

React 순회 방법은 다음과 같습니다. 1. foreach() 메서드를 사용하고 "list.forEach((item)=>{...});" 구문을 사용합니다. 2. map() 메서드를 사용하고 " list.map((항목, 색인)=>{...});".

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

react는 forEach를 사용하거나 두 가지 순회 방법을 매핑합니다

1. foreach(권장)

  list.forEach((item)=>{
  
    });

예:

dataSource.forEach((item) => {
     const est = item.estimateAmount === null ? 0 : parseFloat(item.estimateAmount);
     const gmv = item.estimateGmv === null ? 0 : parseFloat(item.estimateGmv);
     allCountBudget += est;
     allCountGmv += gmv;
     // allCountGmv = parseFloat(allCountGmv) + parseFloat(gmv);
   });

2.map

list.map((item, index)=>{

});

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

예:

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

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

1.

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;)  
);  
export default App;

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 순회 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!