React の for ループ

1. React の .map() メソッドで for マップを実装する
2. JavaScript for ループ
3. 即時呼び出し関数

複雑なバックエンドデータの処理は、フロントエンド開発者の仕事の一部です。多くの場合、データには、UI のコンポーネントまたはその他のビルディングブロックを表すオブジェクトのリストが含まれています。

たとえば、オンラインストアを作成する場合、データには Web サイトに表示する必要のある製品のリストが含まれている可能性があります。リストを手動で調べてコンポーネントを 1つずつ作成することは、さまざまな理由で非効率的です。たとえば、商品がリストから削除または追加された場合はどうしますか？毎回 JSX ファイルに戻って更新することはできません。

リストに目を通し、コンポーネントまたは HTML 要素を自動的にレンダリングする方法は複数あります。

React の .map() メソッドで for マップを実装する

ES6 で導入された .map() メソッドは、配列をループして、配列内の各アイテムからのデータを含む有効な JSX 要素を返すデフォルトの方法です。開発者は、このメソッドを使用して、通常の HTML 要素だけでなくカスタムコンポーネントも作成することがよくあります。

ループを実行する方法は他にもありますが、ほとんどの React 開発者は、読み取り、書き込み、保守が簡単なため、.map() メソッドを使用します。オブジェクトの配列をループしてユーザーデータを画面に表示する方法は次のとおりです。

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    console.log('App started');
    return <div>
    {data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
    </div>
  }
}

出力：

John Doe, 44 years old

Jane Doe, 45 years old

この例では、map() メソッドが 2 回実行され、毎回 1つの段落要素が返されることに注意してください。そのため、結果を <div></div> でラップすることが不可欠です。すべてのコンポーネントは、必要な数の子要素を持つ 1つの親コンテナを返す必要があります。

key 属性

.map() メソッドを使用して作成されたすべての要素には、一意の値に設定された key 識別子が必要であることに注意してください。

<p key={person.name}>{}</p>)

React は、index 値を使用して key プロパティの一意の値を生成することを推奨していません。

props の継承

.map() メソッドを使用して複数のコンポーネントをレンダリングする場合は、props を渡すこともできます。

複数の Product コンポーネントをレンダリングしようとしているとしましょう。props を渡す方法は次のとおりです。

return <div>
    {data.map(product => <Product price={product.price} name={product.name}></Product>)}
    </div>

JavaScript for ループ

配列をループする別の方法は、for ループを使用することです。このアプローチを選択する場合は、return ブロックの上でループを実行する必要があります。

コードは次のようになります。

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    let persons = [];
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return <div>
    {persons}
    </div>
  }
}

.map() と比較すると、このアプローチはより冗長で理解しにくいものです。ただし、結果は同じになります。

即時呼び出し関数

return ステートメントで for ループを使用することは技術的には可能ですが、関数を作成し、for ループを本体として使用する必要があります。関数の記述が完了したら、すぐに呼び出すために角かっこ () を付けて関数を呼び出す必要があります。仕組みは次のとおりです。

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    return 
    <div>
    {function() {
      let persons = []
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return persons
    }()
    }</div>
  }
}