React进阶笔记10(Fragments)

Fragments

React中一个常见的模式就是为一个组件返回多个元素，Fragment可以聚合一些子元素的列表。并且不是在DOM中额外的增加节点。

Fragment看起来像空的jsx标签。

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

动机

一个常见的模式是为了组件返回一些子元素列表，以这个实例的React片段为例。

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

为了最终渲染有效的HTML，需要在 <Columns />中渲染<td>，然而不能再父级的<div>中进行渲染，因为这样的结构是无效的。
例如：

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

在 <Table /> 组件中的输出结果如下：

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

此时中间就会有一个<div>，这不是我们想看到的。

因此我们引入了Fragment

使用

class Columns extends React.Component{
    render(){
        return(
            <>
                <td>hello</td>
                <td>world</td>
            </>
        )
    }
}

这等于在<td>外围添加一个空的标签，这样就不会有编译问题，提示你没有根元素了。

然后在正确的<table/>组件中，渲染的结果也是正确的。

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

可以像使用其它元素那样使用 <></>。

清晰的形式

另一种使用的方式是使用React.Fragment组件，React.Fragment组件可以在React对象上使用。这可能是必要的，如果你的工具还不支持jsx片段的话， 注意在 React 中，<></> 是 <React.Fragment/> 的语法糖。

带key的Fragments

<></>类型的写法不能接受 键值和属性。这也是他的缺陷。

此时，如果你需要一个带key的片段，你可以直接使用<React.Fragment />，一个使用场景是映射一个集合为一个片段数组。例如创建一个描述列表。

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

key是唯一可以在Fragment中传递属性的，在以后可能会增加额外的属性支持或者事件处理。

在线 Demo

你可以使用 CodePen 试试 JSX 片段语法。