reactjs – 在React.js中重复跨越？

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>
 );
}

谢谢！

正如@ivarni所建议的那样,额外的跨度是由白色空间引起的！

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

<ReactElement>{noRoomForWhiteSpace}</ReactElement>