在jsx中我們可以向在js中運算元組的那些迭代方法一樣來生成react element列表,切記需要包裹在{} 中.比如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')
);

 

當你執行這段程式碼的時候會收到一個提醒,要求為每個item 的react element元素提供一個key屬性,key的值應該是一個string型別,在一個react element元素陣列中,每個元素的key應該保持唯一,大部分你可以使用對應state的item的id去標識,如果沒有,可以用下標index,但是如果對list進行排序就不要使用這種方式,否則可能會對效能產生負面影響,同時index也是react在你不使用key時預設方案.

同時key只在陣列環境中起作用,比如<ListItem>, 而不是在ListItem內部render中的<li>標籤中使用key,這樣是不起作用的.key與array是結合在一起使用的的

記住一個規則: 只有react element 在map函式下,才需要使用key

key的唯一性只侷限於同一個陣列下,對於不同陣列的react element 可以使用相同的key 

key只是提供給react的一個標記,他不會傳遞給元件內部,因此如果在元件內你需要key的value就需要自定義一個新key然後傳遞給元件內部