react fragment 如何遍历

遍历 React Fragment 的方法

在 React 中，Fragment 用于包裹多个子元素而不引入额外的 DOM 节点。遍历 Fragment 的方式与遍历普通数组类似，但需注意 Fragment 的特殊语法。

使用 map 遍历 Fragment 子元素

可以通过将子元素转换为数组，然后使用 map 方法进行遍历：

import React, { Fragment } from 'react';

const items = ['Item 1', 'Item 2', 'Item 3'];

function List() {
  return (
    <Fragment>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </Fragment>
  );
}

简写语法 <></> 的遍历

Fragment 的简写语法同样支持遍历：

function List() {
  return (
    <>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </>
  );
}

遍历嵌套 Fragment

如果 Fragment 嵌套多层，可以直接在嵌套层使用 map：

function NestedList() {
  const groups = [
    ['A', 'B'],
    ['C', 'D']
  ];

  return (
    <Fragment>
      {groups.map((group, groupIndex) => (
        <Fragment key={groupIndex}>
          {group.map((item, itemIndex) => (
            <span key={itemIndex}>{item}</span>
          ))}
        </Fragment>
      ))}
    </Fragment>
  );
}

使用 React.Children.map 遍历

如果需要动态遍历 Fragment 的子元素，可以使用 React.Children.map：

function DynamicList({ children }) {
  return (
    <Fragment>
      {React.Children.map(children, (child, index) => (
        <div key={index}>{child}</div>
      ))}
    </Fragment>
  );
}

遍历 Fragment 的注意事项

• 必须为遍历的每个子元素提供唯一的 key 属性。
• 简写语法 <></> 不支持传递 key 或其他属性，如需使用属性需换为完整写法 <Fragment>。
• 直接遍历 Fragment 的子元素时，确保子元素是可迭代的数组或集合。