開発されると、重複コードが発生します.

import React from "react";

const Sample = () => {
  return (
    <ul>
      <li>눈사람</li>
      <li>눈</li>
      <li>사람</li>
    </ul>
  );
};

このようなコードは管理の面で低効率で浪費されている.
効率的に管理する方法を理解します.

JavaScript配列のmap()関数

JavaScript配列オブジェクトの組み込み関数map関数を使用して、重複する構成部品をレンダリングできます.
map関数は、パラメータに渡された関数を使用して、アレイ内の各要素を必要なルールに従って変換し、新しいアレイを生成します.

構文

arr.map(callback, [thisArg])
この関数のパラメータは次のとおりです.

callback:新しい配列要素を生成する関数.パラメータは3種類あります.
-currentValue:現在処理中の要素

index:現在処理中の要素のindex値

array:現在処理中のソースアレイ

thisArg(オプション):callback関数で使用するthisパラメータ

例

var numbers = [1, 2, 3, 4, 5];
var processed = numbers.map(function(num){ return num * num});
console.log(processed);

// [1, 4, 9, 16, 25]

ES 6文法で書いてみることもできます.

var numbers = [1, 2, 3, 4, 5];
var result = numbers.map(num => num*num);
console.log(result)

// [1, 4, 9, 16, 25]

データ・アレイから構成部品アレイへの変換

構成部品の修正

先ほど繰り返したSampleコードを修正します.

import React from "react";

const Sample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((name) => <li>{name}</li>);
  return <ul>{nameList}</ul>;
};

あなたが望むように優秀な選手になりました.
しかし、鍵のない警告メッセージが表示された.
肝心なのは何ですか.

key

反応器では、keyは、エレメントアレイをレンダリングするときにどのエレメントが変化したかをユーザに理解させる.
keyがない場合、仮想DOMを比較する過程で、リストを順次比較し、変化を検出します.
ただし、keyがあれば、この値を使用して何が変化したかをすばやく検出できます.

鍵の設定方法

map関数に渡されるパラメータの関数内部には、素子propsを設定するように設定すればよい.
key値は常に一意でなければなりません.

import React from "react";

const Sample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((name, index) => <li key={index}>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default Sample;