如何将span元素附加到字符串数组，.join（“，”）并呈现？

Question

我有

var pos = ["a","b"]
pos.unshift(<span className="common">Common Word</span>)
var parts_of_speech = pos.join(', ')

渲染{pos}正确打印Common Word，我可以设置css类的样式。打印{parts_of_speech}会导致[object Object]而不是Common Word被打印。

如果能做到这一点，我可以做些什么，或者这是错误的做法？

Answer 1

当您在JSX中说<span className="common">Common Word</span>时，您没有处理span元素。它实际上只是一个JavaScript函数调用：

React.createElement(
  "span",
  { className: "common" },
  "Common Word"
);

你可以use Babel to get the result above。

因此，您将获得使用字符串连接函数结果的结果。

您的代码通过Babel转换为以下内容：

var pos = ["a", "b"];
pos.unshift(React.createElement(
  "span",
  { className: "common" },
  "Common Word"
));
var parts_of_speech = pos.join(', ');

因此，如果React.createElement返回一些对象，它应该有toString()方法输出[object Object]。

Like this example：

"use strict";

var pos = ["a", "b"];
pos.unshift((function() { return {}; })());
var parts_of_speech = pos.join(', ');

console.log(parts_of_speech)