React文档篇 - Fragement

React 中的一个常见模式是一个组件返回多个元素。Fragments 容许你将子列表分组，而无需向 DOM 添加额外节点。

• 简写用<></>表示，不能带key
• React.Fragement 能够且仅能够带key
• 经常使用来避免增长无心义的div标签或使用for循环致使破坏htm元素像tr/td， select/option之类的结构

基本用法

class Table extends React.Component {
  render() {
    return (
      <table> <tr> <Columns /> </tr> </table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> ); } } 复制代码

带 key 的 Fragments

使用显式 <React.Fragment> 语法声明的片断可能具备 key

function Glossary(props) {
  return (
    <dl> {props.items.map(item => ( // 没有`key`，React 会发出一个关键警告 <React.Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </React.Fragment> ))} </dl> ); } 复制代码