如何在 ReactJS 中的字符串内呈现跨度数组？

Question

我有一个span元素数组，需要在另一个 static 文本中呈现。

最终结果示例：将3 、 1和2以正确的顺序here the bold numbers are the spans

这是我的代码

generateQuestion() {
    const newState = { ...this.state };
    let numbers= newState.numbers.map((item, index) => <span style={{color: "red"}}>{item.number}</span>)
    let textQuestion = `Place the numbers ${numbers[0]}, ${numbers[1]} and ${numbers[2]} in the right order.`;

    return (
        <div>{textQuestion}</div>
    );
}

问题是我在渲染时得到这个Place the numbers [object Object], [object Object] and [object Object] in the right order

当我直接渲染numbers数组时，我得到了跨度

return (
        <div>{numbers}</div>
);

我该如何解决这个问题？

Answer 1

您正在尝试在字符串中呈现对象，正确的方法是使用 jsx 而不是字符串：

generateQuestion() {
  const newState = { ...this.state };
  let numbers= newState.numbers.map((item, index) => <span style={{color: "red"}}>{item.number}</span>)
  let textQuestion = <div>Place the numbers {numbers[0]}, {numbers[1]} and {numbers[2]} in the right order.<div>;

  return (
      {textQuestion}
  );
}