react fragment 如何遍历

遍历 React Fragment 的方法

在 React 中，Fragment 用于包裹多个子元素而不引入额外的 DOM 节点。以下是几种遍历 Fragment 的常见方法：

直接遍历子元素

使用 React.Children.map 可以遍历 Fragment 的子元素：

import React from 'react';

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

// 使用 Fragment 作为子元素
<Example>
  <React.Fragment>
    <span>Item 1</span>
    <span>Item 2</span>
  </React.Fragment>
</Example>

使用数组或对象

如果数据是数组或对象，可以直接遍历数据并生成 Fragment：

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

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

简写语法

Fragment 的简写语法 <> </> 也可以用于遍历：

const data = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];

function DataList() {
  return (
    <>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </>
  );
}

注意事项

• 遍历时需要为每个子元素分配唯一的 key，通常使用 id 或 index。
• Fragment 本身不支持传递 key 以外的属性（如 className 或事件处理函数）。