如何在JSX中使用追加（+=）运算符？

你遇到的问题核心是：JSX标签本质是JavaScript对象，不是字符串。

你写的<span>{i}</span>，实际是React.createElement('span', null, i)的语法糖，返回的是一个描述DOM结构的对象。当你用+=把它和空字符串j拼接时，JavaScript会自动调用对象的toString()方法，把它转成[object Object]，所以最后得到的就是三个这个字符串连起来的结果。

正确的写法 #

方法一：用数组存储JSX元素

把空字符串改成数组，用push添加JSX元素：

let j = [];
// 注意用for...of遍历数组值，for...in遍历的是索引
for (let i of [1,2,3]) {
  j.push(<span key={i}>{i}</span>);
}

渲染时直接写{j}，React会自动遍历数组并渲染每个元素。

方法二：用数组map方法（更符合React风格）

直接用数组的map方法生成JSX元素数组：

const elements = [1,2,3].map(i => <span key={i}>{i}</span>);

渲染时写{elements}即可。

注意点 #

渲染数组形式的JSX元素时，每个元素必须添加唯一的key属性，这是React要求的，用来提升渲染性能并避免警告。

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