React JSX 迴圈產生Components loop rendering components

React 使用迴圈產生Components在畫面顯示。

例如下面App()函式中使用Array.map()遍歷字串陣列names中的元素作為<Hello/>的 props.name的值。map(v, i)的v為陣列元素，i為陣列索引index。React要求迴圈產生的components要給定一個唯一可辨識的key值，所以<Hello/>設定key為index。

App.js

import React from 'react';
import './App.css';

let names = ["John", "Mary", "Tony"]

function App() {
  return (
    names.map((v, i) => {
      return <Hello key={i} name={v}/>
    })
  )
}

function Hello(props) {
  return <h1>Hello, {props.name}!</h1>
}

export default App;

產生的html如下。

<h1>Hello, John!</h1>
<h1>Hello, Mary!</h1>
<h1>Hello, Tony!</h1>

• React - Lists and Keys
• React 建立組件 create component