React中的Fragment

Fragment

React 中一个常见模式是为一个组件返回多个元素。Fragment可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

1. Fragment 看起来像空的 JSX 标签

 render() {
  return (
    <>
     <span>Fragment</span>
    </>
  );
}

注: React 中 <></> 是 <React.Fragment/> 的语法糖

2. 带 key 的 Fragment(key 是唯一可以传递给 Fragment 的属性)

<></> 语法不能接受键值或属性。

如果你需要一个带 key 的片段，你可以直接使用 <Fragment／> 标签

render() {
  return (
   list.map((item,index)=>
   	<Fragment key={index}>
   		<span>{item.name}</span>
   	 </Fragment>
   )
  );
}