react经验9：循环渲染的语法活用

在react中，循环渲染一般这么写

<ul>
{
	list.map(item=>(
		<li key={item.key}>{item.value}</li>
	))
}
</ul>

react语法规定每个循环的标签需要加不重复的key，只能有一个根标签。

如果一次循环要输出多个标签怎么办？

import {Fragment} from 'react'
<ul>
{
	list.map((item,index)=>(
		<Fragment key={item.key}>
			<li>{item.value}</li>
			{
				(index<list.length-1)&&(
					<li>&gt;</li>
				)
			}
		</Fragment>
	))
}
</ul>

这个例子是一次循环输出两个标签，key加在了Fragment上。

Fragment在react中表示空标签，用于向语法妥协的占位，平时可简写为"<></>"

在需要加key的时候要写完整名称。