logo

TechCodeview

反応マップ

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

React では、?map?コンポーネントの類似オブジェクトのリストを走査して表示するために使用されるメソッド。マップは React の機能ではありません。代わりに、これは任意の配列に対して呼び出すことができる標準の JavaScript 関数です。 map() メソッドは、呼び出し元の配列内のすべての要素に対して提供された関数を呼び出すことによって、新しい配列を作成します。

例

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

 var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue);

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

1. リスト要素をトラバースします。

メソッドJavaに等しい

例 

 import React from &apos;react&apos;; import ReactDOM from &apos;react-dom&apos;; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) =&gt; <li>{myList}</li> ); return ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = [&apos;A&apos;, &apos;B&apos;, &apos;C&apos;, &apos;D&apos;, &apos;D&apos;]; ReactDOM.render( , document.getElementById(&apos;app&apos;) ); export default App;

出力

ランダムSQLで並べ替える
反応マップ

2. キーを使用してリスト要素を移動します。

例 

 import React from &apos;react&apos;; import ReactDOM from &apos;react-dom&apos;; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) =&gt; ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById(&apos;app&apos;) ); export default App;

出力

反応マップ