{return
  • {item}
  • })}" 구문을 사용하세요. 배열 ToDoList를 표시합니다. 2. 배열을 사용하여 "map()" 메서드를 호출하고 원하는 콘텐츠를 반환합니다."/> {return
  • {item}
  • })}" 구문을 사용하세요. 배열 ToDoList를 표시합니다. 2. 배열을 사용하여 "map()" 메서드를 호출하고 원하는 콘텐츠를 반환합니다.">

     >  기사  >  웹 프론트엔드  >  반응에서 지도의 사용법은 무엇입니까

    반응에서 지도의 사용법은 무엇입니까

    藏色散人
    藏色散人원래의
    2022-12-28 09:52:162388검색

    반응에서 지도 사용: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.