🔐 KeyとList

最後に前回の記事に続いてキーとリストについての記事を書きましたアレイデータは反応器においてもよく見られ、重要であるため、よく理解してみましょう.前述したリストとキー応答式ドキュメントを参照して、いくつかの基本概念を理解し、私のコードを通じてこれらのmap関数をよりよく理解し、パラメータをコンポーネント化する方法について議論します.

📚 既定のリスト構成部品

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

既定のリスト構成部品.変数を指定し、その変数のデータ型をリストします.このリストを巡るmap関数で生成された数値をliラベルに入れ、ulで変数で返します.
最後の仮想ドームにレンダリングされた関数では、Property名のnumbersとその値がリストされているコードが表示されます.

<NumberList numbers={numbers} />

ただし、上記の方法ではエラーが発生します.どのようなエラーが発生しますか?

▼▼エラー画面

リストのどの子も独自のkey属性値を持つべきだという.では、前述したように、コードを再修正しましょう.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 자식 리스트에 key 속성값 부여                            
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

これは、リストを作成するときに含める必要がある特殊な文字列属性です.では、keyについて正式に理解してみましょう.

🔑 Key

keyは、どの反応を変更、追加、削除するかを区別するのに役立ちます.各リストのエンティティに一意のキー値を付与し、コマンドを確実に実行します.

const todoItems = todo.map((todo) =>                      
  <li key={todo.id}>{number}</li>
);

keyは一意の値でなければならないので、他のアイテムに比べて一意に識別可能な値を指定する必要があります.多くの場合、データのIDは鍵である.
もしそうであれば、入力入力入力を入力する関数を定義する必要があります.だからまずはInputでアクティビティを入力しましょう

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

ただし、上記のようにmap関数に組み込まれた2番目のパラメータindexを使用してもよい.しかし、これは良い方法ではなく、最後の手段かもしれません.たとえば、コメントを追加したり削除したりしてインデックス値が変化した場合、どうなるのでしょうか.
リストの前のキー値が反応器が予想したドームに描かれた同じ要素のキー値と同じであれば、問題は発生しません.しかし、上記の場合、これは事実ではありません.
Robin Pokorny'sが書いたキーとしてインデックスを使用すると、悪影響を及ぼします。の詳細を参照してください.

💉 キーで構成部品を抽出

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

キーは、周囲の配列のコンテキストでのみ意味があります.
例えば、ListItem要素が抽出される場合、配列内のListItem要素は、<ListItem />のli要素ではなくkeyを有しなければならない.
簡単に言えば、map関数の内部のエンティティにキーを追加します.mapの関数が重すぎる場合は、素子に分離することが望ましい.
今、リストとキーについて感じていますか?この概念は理解しにくいと思います.最后に私のコードを皆さんに见せてAgroのタイトルを绍介します

🧑‍💻 実装コード

Main.js

前述したように、stateのすべての値と関数がホームページで定義されています.サブエレメントは、propsを使用して値をインポートします.反応器のメンテナンスを簡素化するために,一方向データストリームを提供した.

同じホームページにCommentという構成部品を作成し、propsのコードに値を渡します.

Comment.js

propsは、構造分解に割り当てられ、propsと呼ばれる要素に渡された.

CommentList.js

私たちはやっとmap関数のCommentList素子に着いた.いったいテーマでどういう意味ですか.

{list.map((comment, index) => {
  return (
    <li key={index}>
      <CommentOne comm={comment} />
    )
})}

上の部分をコードで残しましたここで重点的に表示する部分はkeyと構成部品の属性値です.コメントリストは地図上をうろうろしながらコメントを返しますしかし、ここでは一意のキー値を付与する必要があるが、最後の手段はindex値である.
この点は問題が発生する前に可能であるが、上述したように、これは本当に最後の手段であるため、keyにindex値を提供することを避けることができれば、避けるべきである.
そして次のCommentListというコメントの1つの成分を見て、CommentOneというcommには何の価値がありますか?属性値は、マッピングされた最初のパラメータpropsを含む.これにより、コメントごとにコンポーネントを構成することができます.
実際,これは非常に簡単な論理であるが,私が初めて反応器に接触した人にとって,関数のパラメータがcurrentValueの属性値として利用できるとは全く思わなかった.だから青い星と2日間悩んだ
では、コメントを組み合わせてみましょう.

CommentOne.js

こうして簡単に一つのコメントを組み合わせました今回はキー値は不要です.原因を知っていると思いますが、もしあなたが知らないなら、上を見てください.

コメントを作成すると、次のように各コメントにユニークなprops度が表示されます.でも、これよりもっと良いのはID値なんですよね?

後記

やっぱり反応が難しい学習が進むにつれて、ユーザーに非常に良い体験をもたらしますが、今のところ私にそんなに良い体験をもたらすかどうか分かりません.
しかし、明らかに、彼らはますます反応に慣れている.1つの間違いについて約2日間悩んで、問題はやっと解決することができて、しかし今回の機会を通じて、私は再び間違いに出会った時、私は多くの成長ができることを改めて感じました.
YouTubeで床に香炉を開発したというように、「自分が壊したおもちゃの数のように成長している」と感じる瞬間のチャンスです.
実際、来週から私が作成したマイクロブログページとバックエンドでログイン/登録練習を行います.そこで他の間違いや障害にも遭遇するに違いない.
このような考えで、私はおもちゃを壊し続けます.もしあなたが気にしないなら、私は同級生のおもちゃも壊します.では、次の文章でまたお会いしましょう.