『React』Fragment的用法及简写形式

在 React 渲染组件时，每个组件只能返回一个根节点（root element）。传统上，如果我们需要渲染多条并列的元素，通常会使用一个多余的

或者其他容器标签将它们包裹起来。但是，这样会在最终的 HTML 中多生成一个无意义的节点，可能会影响样式、布局，甚至带来不必要的性能开销。

为了消除这种“无意义的包裹元素”，React 引入了组件。它 在渲染时不会生成额外的 DOM 节点，仅仅是一个“虚拟”容器，帮助我们在 JSX 中满足“只能返回一个根节点”的规则。它的本质只是 React 的一个内置组件，本身并不在 DOM 中出现。

Fragment 的用法

最直接的写法是直接从 React 库中导入 Fragment，然后在 JSX 中如下使用：

import React, { Fragment } from 'react';

function MyComponent() {
  return (
    
      标题
      文字描述
    
  );
}

上面代码，组件返回了一个，内部包含多个并列元素；渲染到网页时并不会多出一个父级标签，而是直接渲染

、

如果你不想写 import { Fragment } from 'react'，也可以直接使用全称：

import React from 'react';

function MyComponent() {
  return (
    
      标题
      这是一段描述文字。
    
  );
}

export default MyComponent;

两者效果是完全一样的。

简写方式

从 React 16.2 开始，官方支持了的简写语法——空标签 <>...，使用起来更简洁：

function MyComponent() {
  return (
    <>
      标题
      这是一段描述文字。
      
        列表项 1
        列表项 2
      
    
  );
}

两者（... 与 <>...）在渲染结果上没有区别。它们都不会在 DOM 中生成额外的节点。

注意： 空标签的简写语法不能使用 key 或其他属性，比如 <> 无法写成 < key="..." >。如果需要给 Fragment 本身指定 key，就必须使用完整写法 ...。

比如这种情况

import React from 'react';

function TodoList({ todos }) {
  return (
    
      {todos.map((todo) => (
        
          {todo.text}
          状态：{todo.completed ? '已完成' : '未完成'}
        
      ))}
    
  );
}

如果使用简写空标签 <>... 则无法指定 key，会导致警告或无法正常做列表 Diff。因此在需要绑定 key 的场景下一定要使用 ...。

常见使用场景

组件返回多个并列节点

如果父级容器已足够，只想返回多条标签而不加冗余容器：

function ArticleSummary({ title, excerpt }) {
  return (
    <>
      {title}
      {excerpt}
    
  );
}

表格中渲染多行

。可把两行或多行当作一组处理：

import React, { Fragment } from 'react';

function DataTable({ list }) {
  return (


        {list.map(item => (

))}

{item.name}	{item.value}
详情：{item.detail}


  );
}

条件渲染多节点

当一个条件下需要返回多条并列节点，用 Fragment 代替冗余父元素，更清爽：

function UserStatus({ user }) {
  return (
    <>
      {user.name}
      {user.online ? 在线
 : 离线}
    
  );
}

与其他方式对比

多包一个

虽然能满足语法，但会产生额外节点，可能破坏 CSS 布局（如 Flex、Grid）或增深 DOM 层级。

返回数组

可以直接写数组返回多个元素，但每个元素都要写 key，可读性差：

function Example() {
  return [
    标题,
    内容,
  ];
}

相比之下，Fragment 更简洁可读，且不用给内部每个元素都写 key（只需给 Fragment 本身写一次）。

以上就是本文的全部内容了，如果本文对你有帮助的话请转发给你的工友～

想了解 React 的更多玩法，欢迎关注《React 中文教程》