前端教程：React之Fragments组件语法片段的使用

React开发中常见的模式之一是将多个元素返回一个组件，Fragments允许您聚合一个子元素列表，并且不会在DOM中添加额外的节点。会Vue的朋友当然会发现，它看起来和Vue的template非常相似，都可以用来表示一个空节点。但这和Vue的temlate还是有一点不同的，我们都知道，Vue的组件template内的子级只有一个节点，而react的Fragments子级可以有多个节点，因此这两者的区别也是正式的。  

为什么使用Fragments？  

首先，先来看一个示例。

//Columnsclass Columns extends React.Component {  render() { return (   <div>
  <td>Hello</td>
  <td>World</td>
   </div>
 );
  }
}//Tableclass Table extends React.Component {  render() { return (   <table>
  <tr>
 <Columns />
  </tr>
   </table>
 );
  }
}123456789101112131415161718192021222324复制代码类型：[javascript]

可以看到，在table组件tr中，渲染了Columns组件，而最终的输出是这样的。

<table>
  <tr>
 <div>
   <td>Hello</td>
   <td>World</td>
 </div>
  </tr>
</table>12345678复制代码类型：[python]

根据上方输出结构可以看到，tr下面多了一个div，造成了dom结构出现了非法嵌套，最终HTML将会是无效的。而这并不是我们想要的，所以Fragments的出现就是为了解决这样的问题。  

如何使用Fragments？  

我们就上方的示例进行更改  

//Columnsclass Columns extends React.Component {  render() { return (   <React.Fragment>
  <td>Hello</td>
  <td>World</td>
   </React.Fragment>
 );
  }
}//Tableclass Table extends React.Component {  render() { return (   <table>
  <tr>
 <Columns />
  </tr>
   </table>
 );
  }
}123456789101112131415161718192021222324复制代码类型：[javascript]

最终输出  

<table>  <tr>
 <td>Hello</td>
 <td>World</td>
  </tr></table>123456复制代码类型：[javascript]

如果你觉得上方语法还是比较麻烦，不用着急，jsx提供了一个简写语法，示例如下:  

//Columnsclass Columns extends React.Component {  render() { return (   <>
  <td>Hello</td>
  <td>World</td>
   </>
 );
  }
}1234567891011复制代码类型：[javascript]

你可以像使用其他元素一样使用<></>，不过它不支持键值或属性。  

请注意，目前许多工具都不支持这个简写语法，所以你可能需要明确地使用<React.Fragment>，直到工具支持这个语法。  

带key的Fragments  

function Glossary (props) {  return ( <dl>
   {props.items.map(item => (
  // 没有`key`，将会触发一个key警告  <React.Fragment key={item.id}>
 <dt>{item.term}</dt>
 <dd>{item.description}</dd>
  </React.Fragment>
   ))} </dl>
  );
}12345678910111213复制代码类型：[javascript]

key是唯一可以传递给Fragment的属性。未来，可能增加额外的属性支持，比如事件处理等。