React 中如何使用 Fragments？

推荐答案

在 React 中，Fragments 允许你将多个子元素分组，而无需向 DOM 添加额外的节点。你可以使用 React.Fragment 或者简写语法 <>...</> 来实现。

// www.javascriptcn.com code example
import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>标题</h1>
      <p>段落内容</p>
    </React.Fragment>
  );
}

// 或者使用简写语法
function MyComponent() {
  return (
    <>
      <h1>标题</h1>
      <p>段落内容</p>
    </>
  );
}

本题详细解读

什么是 Fragments？

Fragments 是 React 提供的一种机制，允许你将多个子元素分组，而不会在 DOM 中引入额外的节点。这在某些情况下非常有用，比如当你需要返回多个元素但又不想添加一个额外的 div 或其他容器元素时。

为什么使用 Fragments？

1. 避免不必要的 DOM 节点：在某些情况下，添加额外的 div 或其他容器元素可能会导致不必要的 DOM 节点，这可能会影响性能或破坏 CSS 布局。
2. 保持结构简洁：使用 Fragments 可以让你的组件结构更加简洁，避免嵌套过深。

如何使用 Fragments？

1. 使用 React.Fragment：你可以显式地使用 React.Fragment 来包裹多个子元素。

   <React.Fragment>
     <h1>标题</h1>
     <p>段落内容</p>
   </React.Fragment>

2. 使用简写语法 <>...</>：React 还提供了一种简写语法 <>...</>，它与 React.Fragment 的功能相同，但更加简洁。

   <>
     <h1>标题</h1>
     <p>段落内容</p>
   </>

Fragments 的特殊属性

React.Fragment 可以接受一个 key 属性，这在渲染列表时非常有用。例如：

// www.javascriptcn.com code example
function MyList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <li>{item.name}</li>
          <li>{item.description}</li>
        </React.Fragment>
      ))}
    </ul>
  );
}

注意事项

• 简写语法不支持属性：简写语法 <>...</> 不支持任何属性，包括 key。如果你需要传递 key，必须使用 React.Fragment。
• Fragments 不会渲染到 DOM：Fragments 不会在 DOM 中生成任何实际的节点，它们只是逻辑上的容器。

通过使用 Fragments，你可以更灵活地组织你的组件结构，同时保持 DOM 的简洁和高效。