渲染多個元件

function NumberList(props) {

  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>       //不寫key會看到警告 a key should be provided for list items
　　　　{number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

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

key
　　key幫助React識別哪些元素被改變了 比如被新增或刪除 
因此給陣列中的元素賦予一個確定的標識

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);
 

通常使用資料中的id作為元素的key

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

當元素沒有確定id，可以使用元素的索引index作為key

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

如果列表專案的順序可能會變化，我們不建議使用索引來用作 key 值，因為這樣做會導致效能變差，
還可能引起元件狀態的問題。如果你選擇不指定顯式的 key 值，那麼 React 將預設使用索引用作為列表專案的 key 值。

用key提取元件
 

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')
);