React JSX中数组Map时如何正确使用Unicode字符？

错误原因分析 #

你遇到的[object Object]问题，是因为代码里把字符串item和JSX元素<span>unicode</span>用+拼接了——JSX元素本质是React对象，字符串和对象拼接会默认调用toString()，最终输出[object Object]。

正确写法示例 #

方法1：直接在JSX中插入Unicode字符

直接把•写在JSX的大括号外，和变量并列渲染：

const data = ["1","2","3","4","5","6"];
<div>
  {data.map((item, index) => (
    <span key={index}>
      {item}•
    </span>
  ))}
</div>

方法2：将Unicode字符存为字符串变量

把•赋值给字符串变量，再通过大括号插入JSX：

const data = ["1","2","3","4","5","6"];
const bullet = "•";
<div>
  {data.map((item, index) => (
    <span key={index}>
      {item}{bullet}
    </span>
  ))}
</div>

方法3：使用Unicode转义序列

用\u2022（•的Unicode编码是U+2022）代替直接写字符：

const data = ["1","2","3","4","5","6"];
<div>
  {data.map((item, index) => (
    <span key={index}>
      {item}\u2022
    </span>
  ))}
</div>

注意事项 #

• 列表渲染必须给每个元素添加唯一的key属性，避免React警告；
• 不要用+拼接字符串和JSX元素，JSX中需通过大括号{}插入变量或表达式；
• 如果想用HTML实体•，需放在大括号里作为字符串渲染，即{"•"}，但直接用Unicode字符或转义序列更直观。

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