Fragment的妙用，代替arr和div

Fragment实战妙用，代替arr，可以不必要写key

//Fragment写法,不用写key,不用逗号
 <Modal
    title={this.state.title}
    visible={this.state.visible}
    onCancel={this.onCancel}
    footer= {<React.Fragment>
      <Button>取消</Button>
      <Button type='primary'>保存</Button>
    </React.Fragment>}
>

//数组写法,不写key属性报警告
 footer= [
    <Button key='back'>取消</Button>,
    <Button type='primary'  key='primary'>保存</Button>,
 ]

以下载于https://majing.io/posts/10000...
React 16.2最大的变化是新增了fragments特性，fragments语法。

示例：返回一首诗的片段

敬请阅读
<h2>面朝大海，春暖花开</h2>
<p>从明天起，做一个幸福的人</p>
<p>喂马、劈柴，周游世界</p>
<p>...</>

React 16之前的版本

在React 16之前的版本，如果想用组件返回一个子元素列表，我们需要使用div或者span标签把元素列表包装起来。

render() {
  return (
    <div>
      敬请阅读
      <h2>面朝大海，春暖花开</h2>
      <p>从明天起，做一个幸福的人</p>
      <p>喂马、劈柴，周游世界</p>
      <p>...</>
    </div>
  );
}

此方法的缺点是需要使用额外的DOM元素包装。

React 16.0

React 16.0，则新增了数组的方式返回子元素列表。

render() {
 return [
  "敬请阅读",
  <h2>面朝大海，春暖花开</h2>,
  <p>从明天起，做一个幸福的人</p>,
  <p>喂马、劈柴，周游世界</p>,
  <p>...</>
 ];
}

此方式的缺点是：

1. 文本需要使用引号括起来，如“敬请阅读”。
2. 子元素之间使用逗号分隔

这和普通的JSX写法有区别。

React 16.2

React 16.2新增了fragments语法来解决上面两种方式的问题。

render() {
  return (
    <Fragment>
      敬请阅读
      <h2>面朝大海，春暖花开</h2>
      <p>从明天起，做一个幸福的人</p>
      <p>喂马、劈柴，周游世界</p>
      <p>...</>
    </Fragment>
  );
}

可以使用空标签<></>替换<Fragment></Fragment>，<></>为<Fragment></Fragment>的语法糖：

render() {
  return (
    <>
      敬请阅读
      <h2>面朝大海，春暖花开</h2>
      <p>从明天起，做一个幸福的人</p>
      <p>喂马、劈柴，周游世界</p>
      <p>...</>
    </>
  );
}

注意：在渲染时，fragment标签是不会添加到DOM里。

Fragment在React 16.2已添加到React对象里。

const Fragment = React.Fragment;
<Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</Fragment>