javascript - 从字符串元素数组创建 DOM 元素，然后将结果加入 render()

Question

“keyCombo”对象数组定义如下所示，目的是在 React 组件的 render 方法中将数据呈现为样式行:

let items = [{"keyCombo": ["⌘","0"]}, {"keyCombo": ["⌘","Ctrl", "1"]}]

tokbd = (keyCombo) => {
  let styledKeys = keyCombo.map(key => <kbd>{key}</kbd>)
  return <span>{styledKeys.join(" + ")}</span>
}

render() {
  return(
    <div>
      {items.map(item => <span>{this.tokbd(item.keyCombo)}</span>)}
    </div>
  )
}      

我想得到:

但相反，我得到了

[对象对象] + [对象对象](和)
[对象对象] + [对象对象] + [对象对象]

如何将 keyCombo 数组中的字符组合成:

“(样式元素)+(样式元素)+(样式元素)”

而不是:

“样式化(元素+元素+元素)”

甚至 + 字符也被无意中设置了样式？

Answer 1

join() 方法将一个数组(或类数组对象)的所有元素连接成一个字符串并返回该字符串。 MDN这就是您获得 [object Object] 的原因。

您可以尝试使用不带第二个参数的 reduce 来代替:

  tokbd = (keyCombo) => {
      let styledKeys = keyCombo.map(key => <kbd>{key}</kbd>).reduce((prev, curr) => [prev, ' + ', curr])

      return <span>{styledKeys}</span>
    }

codesandbox