<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ListItem = (props) => { //es6中箭头函数
return <li>{props.value}</li>;
}
function NumberList(props) {
var numbers; //声明在外面是因为 {} 中不能出现var,const,let等这种关键字
return (
<ul> {
numbers = props.numbers, //注意这里要加逗号
numbers.map((number) =>
<ListItem key={number}
value={number} /> )}
</ul>
);
}
var array = [a,b,c]; //要传递的参数
ReactDOM.render(
<NumberList numbers={array}/>, //这里的numbers就是props下的numbers,即props.numbers
document.all('example')
);
</script>
</body>
</html>
React列表和Key使用
版权声明：如果对您有帮助，求点赞！本文为博主原创作品，转载请声明出处！ https://blog.csdn.net/u011086209/article/details/86580818
猜你喜欢
转载自blog.csdn.net/u011086209/article/details/86580818
今日推荐
周排行