React数组映射中为何需要使用span标签？

先贴出你的示例代码（标注>>处为关键逻辑）：

const asciiArray = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'];
const gridWidth = 4;

const AsciiGrid = () => (
  <div style={{ backgroundColor: 'black', color: 'white', fontFamily: 'monospace' }}>
    {Array.from({ length: Math.ceil(asciiArray.length / gridWidth) }, (_, i) => i).map(i => (
      <div key={i}>
        {asciiArray.slice(i * gridWidth, i * gridWidth + gridWidth).map((char, j) => (
>>            <span key={j}>{char}</span>
        ))}
      </div>
    ))}
  </div>
);

1. 直接写{char}报错的本质原因 #

你移除<span>后写成的{char}，是在箭头函数的隐式返回中错误使用了JSX语法：

// 错误写法
.map((char, j) => (
  {char}
))

这里的{char}会被JavaScript解析为对象字面量（等价于{ char: char }），而非你预期的“渲染字符”。React无法渲染普通JS对象，因此抛出"Objects are not valid as a React child"错误。

如果想直接返回字符不使用<span>，正确写法是直接返回字符串值，不需要额外{}：

// 无<span>的合法写法
.map((char, j) => char)

但这种写法会触发React开发模式警告——列表子元素必须有唯一的key属性，直接返回字符串无法指定key。

2. 写成{{char}}触发语法错误的原因 #

{{char}}会被解析为：外层{}是JSX表达式占位符，内层{char}是对象字面量。如果放在箭头函数返回中：

// 错误写法
.map((char, j) => (
  {{char}}
))

JavaScript会把外层大括号当成函数体，而{char}作为单独代码块是无效语法（无合法语句），因此触发“意外令牌”错误。

3. 使用<span>的必要性 #

<span>主要解决两个核心问题：

• 提供合法React节点：<span>是原生HTML元素，属于有效的React子节点，能被正常渲染。
• 支持指定key属性：React要求列表元素必须有唯一key以优化渲染、避免歧义，<span>作为容器可方便添加key={j}。

如果不想用<span>，也可以用<React.Fragment key={j}>（或简写<></>，但简写无法加key）替代，效果一致：

// 使用Fragment替代<span>
.map((char, j) => (
  <React.Fragment key={j}>
    {char}
  </React.Fragment>
))

内容的提问来源于stack exchange，提问作者Alabaster