reactjs - 摆脱 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>