React----Fragments简介

Fragments是啥？

React 中的一个模式是，一个组件返回多个元素。而Fragments允许你将子列表分组，而不必向DOM中新加一个节点。

为何使用Fragments

React 15 以前，render()的返回必须要有一个根节点，否则就会报错。
但是这样的后果就是多了一个毫无用处的标签，使代码难看。

class demo extends React.Component{
  render() {
    return(
      <div>Hello</div>
      <div>world</div>
       );
  }
}
//会报错，没有根节点
//要写成：
class demo extends React.Component{
  render() {
    return(
         <div>
         <div>Hello<div>
         <div>world<div>
      </div>
       );
  }
}

React 16 开始，render() 允许返回数组。

export default function () {
    return [
        <div>一步 01</div>,
        <div>一步 02</div>,
        <div>一步 03</div>,
        <div>一步 04</div>
    ];
}

然后使用Fragments的原因就在于这，

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />//包含多个<td>标签，所以写这个组件时，我们需要一个
                  //根节点<div>
        </tr>
      </table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      <div>//当我们用一个根节点去嵌套时，就会生不成列表
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

所以我们应该将 根节点的

节点换成<React.Fragments>:

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

Fragments补充

短语法

class Columns extends React.Component {
  render() {
    return (
      <>//省略中间的内容
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

Key属性

key是目前版本唯一一个可以传递给Fragments的属性

将一个集合映射到Fragments数组：

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>
  );
}