はんぷくおうとうそし
🧑💻 React study 6.
Chapter 6.
リピート構成部品
6.1 JavaScript配列のmap()関数
JS配列オブジェクトの組み込み関数map関数を使用して、重複する構成部品をレンダリングできます.
map関数は、パラメータに渡された関数を使用して、必要なルールに従ってアレイ内の各要素を返し、新しいアレイを生成します.
6.1.1文法arr.map(callback, [thisArg])
arr.map(callback, [thisArg])callback:新しい配列要素を生成する関数で、パラメータは3種類あります.
thisArg(オプション):callback関数で使用されるこの例
6.2データ配列を構成部品配列に変換する
6.2.1構成部品の作成
import React from 'react';
const IterationSample = () => {
const names = ['눈사람', '얼음', '눈', '바람'];
const nameList = names.map((name) => <li>{name}</li>);
return <ul>{nameList}</ul>;
};
export default IterationSample;// 생성한 컴포넌트 렌더링 하기
import { Component } from 'react';
import IterationSample from './IterationSample';
class App extends Component {
render() {
return <IterationSample />;
}
}
export default App;
6.3 key
応答では、keyは、シンボルアレイをレンダリングするときにどの要素が変化したかを決定するために使用されます.
keyがない場合,仮想DOMを比較する過程でリストを順次比較し変化を検出する.
6.3.1鍵の設定
キー値を設定する場合は、map関数パラメータに渡される関数内部設定素子propsのように設定できます.
key値は常に一意でなければなりません.
// 예제
const articleList = articles.map(article => (
<Atricle
title={article.title}
writer={article.writer}
key={article.id}
/>
));
6.4応用
整理する。
1) 컴포넌트 배열을 렌더링 할대는 key값을 설정해 줘야 한다.
2) key값은 언제나 유일한 값이어야 한다.
3) 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 배열 내장 함수를 사용해야 한다.Reference
この問題について(はんぷくおうとうそし), 我々は、より多くの情報をここで見つけました https://velog.io/@davidkim97/React-컴포넌트-반복テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol