React.js中的片段

大多数时候，我们需要从一个组件返回多个元素。React Fragment帮助返回多个元素。另一种选择是使用div之类的html元素包装它们。但是使用额外的html节点可能会导致一些语义问题。

React.Fragment的示例

render() {
   return (
      <React.Fragment>
      <ElementA />
      <ElementB />
      <ElementC />
      </React.Fragment>
   );
}
The short syntax is <>:
render() {
   return (
      <>
         <ElementA />
         <ElementB />
         <ElementC />
      </>
   );
}

如果不使用React Fragment，则了解问题-

假设我们创建一个表-

class ExampleTable extends React.Component {
   render() {
      return (
         <table>
            <tr>
               <ExampleColumns />
            <tr>
         </table>
      );
   }
}
class ExampleColumns extends React.Component {
   render() {
      return (
         <div>
            <td>col 1</td>
            <td>col 2</td>
         </div>
      );
   }
}

实际的语法将包括我们在各列的return语句中添加的div 。

<table>
   <tr>
      <div>
         <td>col 1 </td>
         <td>col 2</td>
      </div>
   </tr>
</table>

现在，表标记包含一个div标记，这破坏了html的语义。因此，为避免这种情况，我们可以简单地将div替换为React.Fragment或简称<>

class ExampleColumns extends React.Component {
   render() {
      return (
         <>
            <td>col 1</td>
            <td>col 2</td>
         </>
      );
   }
}

我们也可以在列表的迭代中使用该片段。

props.myMessages.map(message => (
   //如果没有`key`，React会发出按键警告
   <React.Fragment key={message.id}>
      <dt>{message.title}</dt>
      <dd>{message.text}</dd>
   </React.Fragment>
))