JSX语法——数组
将数组映射到dom,这里给出两种不同的写法。一种是普通的数组,一种是用jsx语法生成的数组。
注意点都写在注释中
<body>
<div id="arr0"></div>
<div id="arr1"></div>
</body>
<script type="text/babel">
//写法1
const arr = [{name:'商品A',num:0},{name:'商品B',num:1}];
let Test0 = React.createClass({
render(){
return <span>
{
arr.map((item,i) => {
console.log(item);
return <div key={i} attr={i + 1}>名称{item.name}-数量{item.num}</div>;
// vue和react在新版中,都增加了key,用于更新时对虚拟dom的比对。
//注意,这里的key值不能绑定对象,否则只能遍历出一项
})
}
</span>
}
})
ReactDOM.render(
<Test0/>,
document.getElementById('arr0')
);
//写法2
const arr2 = [
<a key='1' href="#">第一个</a>,
<b key="2">第二个</b>,
];
// 这里别忘了写大括号
ReactDOM.render(
<div>{arr2}</div>,
document.querySelector('#arr1')
)
</script>
来源:CSDN
作者:_王十四
链接:https://blog.csdn.net/sinat_30122989/article/details/103570503