React 列表 & Keys

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。