在React.js中重复跨越？

Question

React渲染多个跨度，仅使用实际值。关于如何解决这个问题的任何建议：

如果重要的话，用户的名字不应该在一个范围内，而是作为“.chatUser”的innerHTML

实际的渲染方法很简短：

createShortUsername: function() {
 // shortName is first two letter of first name. 
 var shortName = this.props.userName.split(" ")[0].slice(0, 2);
 console.log(shortName);
 return shortName;
},
render: function() {
 return (
   <div className="chatUser"> {this.createShortUsername()} </div>
 );
}

谢谢！

Answer 1

根据@ivarni的建议，额外的跨度是由空格引起的！

为了防止这种情况，请在支撑表达式周围编写没有空格的代码。

<ReactElement>{noRoomForWhiteSpace}</ReactElement>

Answer 2

它实际上是一些特殊的字符（在你的编辑器中不可见），它们会进入代码。（可能如果你有复制粘贴的话）。对我来说是\u2028。检查生成的javascript文件，看看代码中有多少字符。 要摆脱它，你可以删除导致它的行并再次输入（而不是复制和粘贴）