Fragment

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

  1. Fragment 看起来像空的 JSX 标签
 render() {
  return (
    <>
     <span>Fragment</span>
    </>
  );
}

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

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

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

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

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

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐