反応におけるマップの使用法は何ですか

react でのマップの使用: 1. "{this.state.ToDoList.map((item,index)=>{return

{item}})}" 構文ループで配列 ToDoList を表示します。 2. 配列を使用して "map()" メソッドを呼び出し、必要なコンテンツを返します。

#このチュートリアルの動作環境: Windows 10 システム、React バージョン 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 を削除すると [2,3] になり、

は元々は添字付きです。添字 0 が 1、添字 1 が 2、添字 2 が 3 に対応します。変更後は、添字 0 が 2、添字 1 が 3 に対応します。 2 つの仮想 DOM を比較するときの Diff アルゴリズム。ID が同じ場合、対応する内容が異なり、ID の意味が失われるためです。したがって、配列添字をキー値として使用することはお勧めできません。私の理解に基づいて書いておりますので、誤解があるかもしれませんが、いずれにせよ大まかな意味はこんな感じですので、間違いがあればご指摘ください。

3. 実行結果は以下のとおりです。

推奨学習: 「

react ビデオ チュートリアル

」

以上が反応におけるマップの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。