在 React 中，JSX 是一种将组件渲染成 HTML 标记的语法，它可以让你在 JavaScript 中编写类似 HTML 的代码，这让编写和维护复杂的 UI 变得更加容易。在 for 循环中返回 JSX 可以让我们用很少的代码展示大量的相似组件，下面就来介绍一下如何在 for 循环中返回 JSX。

首先我们来看一下返回单个组件的情况。

假设我们现在有一个数组，数组中存放了一些数据，我们想要将这些数据渲染成列表的形式。

import React from 'react'

const data = ['apple', 'banana', 'kiwi', 'orange']

function List() {
  return (
    <ul>
      {data.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  )
}

在这个例子中，我们使用了 map 函数对 data 数组进行遍历，对于数组中每个元素，我们都返回了一个 li 标记，最终渲染成了一个列表。注意到在 JSX 中，我们需要在每个子元素添加一个 key 属性，这是为了帮助 React 更好地进行 DOM diff。

接下来我们看一下如何同时返回多个组件。

假设我们现在有一个包含多个数据组的二维数组，我们想要将这些数据渲染成多个列表。

import React from 'react'

const tableData = [
  ['apple', 'banana', 'kiwi'],
  ['orange', 'peach', 'grape'],
]

function Table() {
  return (
    <div>
      {tableData.map((row, rowIndex) => (
        <ul key={`row-${rowIndex}`}>
          {row.map((cell, cellIndex) => (
            <li key={`cell-${cellIndex}`}>{cell}</li>
          ))}
        </ul>
      ))}
    </div>
  )
}

在这个例子中，我们使用了两层 map 函数对 tableData 二维数组进行遍历，分别渲染出每一行和每一列的数据。注意到我们在每个子元素添加了两个 key 属性，分别表示行和列的索引，这样可以避免出现重复的 key。

在 for 循环中返回 JSX 是 React 中常见的用法之一，通过遍历数据，我们可以快速地生成复杂的 UI 组件，让代码更加简洁和可读。