在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>></li>)}</Fragment>))
}
</ul>
这个例子是一次循环输出两个标签,key加在了Fragment上。
Fragment在react中表示空标签,用于向语法妥协的占位,平时可简写为"<></>"
在需要加key的时候要写完整名称。