Javascript Array.map（）正在返回HTML[对象]

我试图用React和JavaScript制作简单的动画文本，我的问题是，在用字母映射数组后，生成HTML，我得到的是

[Object Object]

。 有人能解释我做错了什么

animation = () => {
  let text = document.querySelector(".hi");
  let leterArr = [...text.textContent];
  text.textContent = "";
  leterArr.map(char => {
    return (text.innerHTML += "<span>" +{char} +"</span>")
  })
}

animation=（）=>{
让text=document.querySelector（“.hi”）；
让leterArr=[…text.textContent]；
text.textContent=“”；
leterArr.map（char=>{
返回（text.innerHTML+=“”+{char}+“”）
})
}

将

{char}

转换为对象。因此，当您用字符串连接它时，对象变成

[object object]

用这个

animation = () => {
  let text = document.querySelector(".hi");
  let leterArr = [...text.textContent];
  text.textContent = "";
  leterArr.map(char => {
    return (text.innerHTML += `<span>${char}</span>`)
  })
}

animation=（）=>{
让text=document.querySelector（“.hi”）；
让leterArr=[…text.textContent]；
text.textContent=“”；
leterArr.map（char=>{
返回（text.innerHTML+=`${char}`）
})
}

您需要执行以下操作：

animation = () => {
  let text = document.querySelector(".hi");
  let leterArr = [...text.textContent];
  text.textContent = "";
  let temp;
  leterArr.map(char => {
    temp += "<span>" + char +"</span>"
  })
  text.innerHtml = temp;
}

animation=（）=>{
让text=document.querySelector（“.hi”）；
让leterArr=[…text.textContent]；
text.textContent=“”；
让温度；
leterArr.map（char=>{
温度+=“”+char+“”
})
text.innerHtml=temp；
}

返回[object object]不是问题。因为您返回的是html标记。所以它的显示方式只有您可能打算执行

leterArr.forEach（char=>text.innerHTML+=`${char}`）

可能重复的

{char}

使用速记属性名创建对象文本。只需删除

{}

或更好的：

text.innerHTML=leterArr.map（char=>`${char}`）。join（“”