JSX嵌套渲染异常：内嵌JSX显示为[object Object]如何解决？

你遇到的[object Object]是因为JavaScript会把JSX元素（本质是React.createElement返回的对象）自动转换为字符串，当你尝试把数字i*j和JSX元素做加法运算时，就会出现这种结果——数字和对象相加，对象被转成了[object Object]字符串。

最简单的修复方式：直接在<td>中并列渲染内容 #

不需要做加法，直接把两个内容放在<td>里就行，JSX支持在一个元素内并列多个子元素：

render() {
  return (
    <table>
      {[...Array(5).keys()].map(i => (
        {/* 给列表元素添加唯一key，避免React警告 */}
        <tr key={i}>
          {[...Array(7).keys()].map(j => (
            <td key={j}>
              {/* 直接并列渲染数字和span元素 */}
              {i * j}
              <span>{i + j}</span>
            </td>
          ))}
        </tr>
      ))}
    </table>
  )
}

其他可选方式 #

如果需要把多个元素作为一个整体（比如后续要条件渲染），可以用React.Fragment（简写为<></>）包裹：

<td key={j}>
  <>
    {i * j}
    <span>{i + j}</span>
  </>
</td>

或者把内容放在数组里（注意数组元素如果是多个的话，React会要求每个元素有key，不过这里在<td>内部的话，一般不会触发警告，但复杂场景建议加上）：

<td key={j}>
  {[i * j, <span key={`span-${i}-${j}`}>{i + j}</span>]}
</td>

额外提醒 #

别忘了给map生成的<tr>和<td>元素添加唯一key，这是React的最佳实践，能避免不必要的重渲染和控制台警告。

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