React学习记录1.2.2——JSX

依然范特西╮ 提交于 2019-12-17 01:38:58

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>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!