[ffxixslh] React - 学习笔记 - Fragments

Fragments

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

render 函数返回的代码段只能存在一个节点，通常做法是使用 Fragment 或它的短语法 <> </> 包裹代码。当然，它们是等效的。

应用：

场景1：

例如，我们想在 tr 标签中放入 Columns 组件，但是 Columns 组件是用 div 包裹的，导致 tr 和 td 无法成为父子关系，导致渲染错误：

这时，使用 Fragments 或它的短语法是很有必要的：

import React, { Fragment } from "react";

function Table() {
  return (
    <table>
      <tbody>
        <tr>
          <Columns />
        </tr>
      </tbody>
    </table>
  );
}

function Columns() {
  return (
-    <div>
+    <Fragment>
      <td>Hello</td>
      <td>World</td>
-    </div>
+    </Fragment>
  );
}

export default Table;

场景2：

如果在列表渲染中需要添加 key 值时， 短语法是不支持的。所以，使用 <Fragment> </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>
  );
}

key 是唯一可以传递给 Fragment 的属性。未来我们可能会添加对其他属性的支持，例如事件。