{return
반응에서 지도 사용: 1. "{this.state.ToDoList.map((item,index)=>{return
{item} }을 사용합니다. )}" 구문 루프를 사용하여 배열 ToDoList를 표시합니다. 2. 배열을 사용하여 "map()" 메서드를 호출하고 원하는 콘텐츠를 반환합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.
리액트에서 지도의 사용법은 무엇인가요?
React의 map() 메소드 사용 및 키 값 바인딩.
1. 다음은 루프에 배열 ToDoList를 표시하는 예입니다.
import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props) this.state = { ToDoList:[1,2] } } render() { return ( <div> <input></input><button>提交</button> <ul> {this.state.ToDoList.map((item,index)=>{ return <li key={index}>{item}</li> })} </ul> </div> ) } }
2. 배열로 map() 메서드를 직접 호출하고, 원하는 내용을 반환하고, 키 값을 바인딩합니다.
<ul> {this.state.ToDoList.map((item,index)=>{ return <li key={index}>{item}</li> })} </ul>
2.1 편의상 여기서 바인딩된 키 값은 배열의 첨자입니다. 이는 실제 사용에서는 권장되지 않습니다. 왜냐하면 React의 Diff 알고리즘이 구성 요소 비교를 수행할 때 호출된 키가 배열의 첨자일 경우 배열이 변경되면
[1,2,3]과 같이 첨자에 해당하는 배열 내용이 잘못됩니다. 1을 삭제하면
원래 첨자 0이 해당됩니다. 아래 첨자 1은 2에 해당합니다. 아래 첨자 2는 3에 해당합니다. 변경 후 아래 첨자 0은 2에 해당하고 아래 첨자 1은 3에 해당합니다. 분명히 이것은 Diff 알고리즘이 두 개의 가상 DOM을 비교할 때 문제를 일으킬 것입니다. id가 같으면 내용이 달라집니다. 아니요, id의 의미가 사라집니다. 따라서 배열 첨자를 키 값으로 사용하는 것은 권장되지 않습니다. 제가 이해한 내용을 바탕으로 쓴 글이니 오해가 있을 수 있으니, 틀린 부분이 있으면 정정해 주시기 바랍니다.
3. 실행 결과는 아래와 같습니다
추천 학습: "react 비디오 튜토리얼"
위 내용은 반응에서 지도의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!