React学习笔记(四)——列表和key——map()方法的使用

创建列表

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