react列表
Posted 天行子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react列表相关的知识，希望对你有一定的参考价值。
实例1
<div id="example"></div>
<script type="text/babel">
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById(\'example\')
);
</script>
实例2
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, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById(\'example\')
);
实例3
<div id="example"></div>
<script type="text/babel">
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5, 6];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById(\'example\')
);
</script>以上是关于react列表的主要内容，如果未能解决你的问题，请参考以下文章