Reactでmapメソッドを使う方法

React では、map メソッドは、コンポーネントの類似オブジェクトのリストを走査して表示するために使用されます。map メソッドは、react に固有のものではなく、任意の配列に対して標準の JavaScript 関数を呼び出すことができます。呼び出し元の配列を使用して配列を作成します。

このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。

Reactでmapメソッドを使う方法

マップは、データがペアの形式で格納されるデータ収集タイプです。これには、マップに保存されている値をマッピングする必要がある一意のキーが含まれています。重複したペアを map() に保存することはできません。これは、保存された各キーが一意であり、主にデータの高速検索と検索に使用されるためです。

React では、map メソッドはコンポーネント内の類似オブジェクトのリストを反復して表示するために使用されます。これは React に固有のものではなく、任意の配列で呼び出すことができる標準の JavaScript 関数です。 map() メソッドは、呼び出し配列内の各要素に対して提供された関数を呼び出すことによって、新しい配列を作成します。

例

指定された例では、map() 関数は数値の配列を受け入れ、その値を 2 倍にし、map() によって返された新しい配列を変数 doubleValue に代入して記録します。

var 数値 = [1, 2, 3, 4, 5]; const doubleValue =数値.map((数値)=>{ return (数値 * 2); });

React では、map() メソッドは次の目的で使用されます。

1. リスト要素をスキャンします。

例

'react' から React をインポート; 'react-dom' から ReactDOM をインポート { const myLists = props.myLists = myLists.map((myList) => <li>{myList}</li > ); return ( <div> <h2>React マップの例</h2> <ul>{listItems}</ul> </div> ); const myLists = ['A', 'B', 'C' , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );

2. キーによってリスト要素を移動します。

例

import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { return <li>{props.value}</li> } function NumberList(props); const listItems =numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <div> <h2>React Map の例</h2> <ul> {listItems} </ul> </div> ); } const 数値 = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList数値={数値} />, document.getElementById('app' ) );