技術標籤：React

建立列表

React可以使用 JavaScript 的 map() 方法來建立列表，語法如下：

array.map(function(currentValue,index,arr), thisValue)
引數	              描述
currentValue	必須。當前元素的值
index	        可選。當前元素的索引值
arr	            可選。當前元素屬於的陣列物件

要生成的列表內容:numbers
numbers.map((numbers中的每一個元素n) => 
	<li>{n}</li>
);
 

示例如下：

const numbers= [1, 2, 3, 4, 5];
const list= numbers.map((n) =>
  <li>{n}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('example')
);

我們可以將以上例項重構成一個元件，元件接收陣列陣列引數：

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

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

此時執行起來會出現警告，a key should be provided for list items ，出現這個情況就是我們需要為每一個列表引數分配一個key：

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

此處我們通過使用map方法第二個引數，即元素的索引值作為key。
當然還有其它兩種作為key的方法：

第二種：
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
 第三種：也可以通過資料的id來作為key
   const listItems = numbers.map((number) =>
    <li key={number.id}>
      {number}
    </li>
  );