react fragment 如何遍历

React Fragment 遍历方法

在 React 中，Fragment 允许在不添加额外 DOM 节点的情况下组合子元素。以下是几种遍历 Fragment 的方法：

使用 React.Fragment 或简写语法 <></>

const items = ['Apple', 'Banana', 'Cherry'];

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

遍历并返回 Fragment 数组

function ItemList({ items }) {
  const fragments = items.map((item, index) => (
    <React.Fragment key={index}>
      <span>{item}</span>
      <br />
    </React.Fragment>
  ));

  return <div>{fragments}</div>;
}

在循环中使用 Fragment 包裹条件渲染

function ConditionalList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <React.Fragment key={item.id}>
          {item.isActive && <li>{item.name}</li>}
        </React.Fragment>
      ))}
    </ul>
  );
}

注意事项

• 当遍历 Fragment 时，必须为每个 Fragment 提供唯一的 key 属性，即使 Fragment 本身不渲染 DOM 元素
• 简写语法 <></> 不支持传递 key 或其他属性，这种情况下必须使用完整的 <React.Fragment> 语法
• Fragment 主要用于分组元素而不影响布局，适合需要返回多个相邻元素的场景