创建列表
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>
);