React 列表 & Keys
const numbers = [1,2,3,4,5];
const listItems = numbers.map((number) =>
<li key={number}>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('example')
);
注意:每个列表元素分配一个key,不然会出现警告 a key should be provided for list item,意思是需要包含key。
function NumberList(props){
const numbers = props.numbers;
const listItems = numbers.map((number)=>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1,2,3];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
)
注意:key值优先使用数据的id,如果没有,则用序列号索引index作为key。