> For the complete documentation index, see [llms.txt](https://zg-zhang.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zg-zhang.gitbook.io/note/react/offical-website/advanced-guides/fragments.md).

# Fragments

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

\`\`\`jsx harmony

render() { return (     \</React.Fragment> ); }

````
## 动机

```jsx harmony

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

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

* Columns 需要返回多个 td 元素以使渲染的 HTML 元素有效
* 如果在 Columns 的 render() 中使用了父 div，则生成的 HTML 将无效
* 而使用 React.Fragment 来当作父元素就可以正确生成 HTML

## 短语法

* `<> </>` 可以像使用任何其他元素一样使用，除了不支持 key 或 属性

\`\`\`jsx harmony

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

\`\`\`

## 带 key 的 Fragments

* 使用显示的 React.Fragments 语法声明的片段可能具有 key
* key 使唯一可以传递给 Fragment 的属性


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zg-zhang.gitbook.io/note/react/offical-website/advanced-guides/fragments.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.