摆脱 React.js 中的重复跨度?

本文介绍了摆脱 React.js 中的重复跨度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

React 呈现多个跨度，仅使用实际值.有关如何解决此问题的任何建议:

React renders multiple spans, only with the actual value. Any advice on how to fix this:

如果重要的话，用户的名字不应该在一个跨度内，而是作为.chatUser"的innerHTML

And if it matter, the name of the user isn't suppose to be in a span, but as innerHTML of ".chatUser"

实际的渲染方法很短:

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 所建议的，额外的跨度是由空格引起的！

As suggested by @ivarni, the extra spans were caused by white spaces!

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

To prevent this write your code without white spaces around the braced expressions.

<ReactElement>{noRoomForWhiteSpace}</ReactElement>

这篇关于摆脱 React.js 中的重复跨度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Chatuser