React.js中重複跨度的刪除？

React渲染多個跨度，僅限於實際值。關於如何解決此問題的任何忠告：React.js中重複跨度的刪除？

enter image description here

如果有關係，用戶名是不是想成爲一個跨度，但作爲「.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> 
); 
}

謝謝！

來源

2014-10-22 kaid

刪除'{this.createShortUsername（）}'周圍的空白處？我懷疑這些跨度被添加到靜態內容（空格）分隔動態內容（用戶名）。 – ivarni 2014-10-22 06:58:35

React將所有浮動文本節點包裝在一個範圍內，以便它可以爲其分配一個ID並在更新和對帳期間快速返回它。正如@ivarni所建議的，前導和尾隨空格可以產生空的跨度。如果這發生在服務器上，並且您不需要額外的標記（因此您只需要「''

shortname

'''，那麼您可以查看[React.renderComponentToStaticMarkup]（http://facebook.github.io/react/） docs/top-level-api.html＃react.rendercomponenttostaticmarkup） – trekforever 2014-10-22 17:30:26

修正了它！你們很棒，非常感謝你！ – kaid 2014-10-22 19:03:11

正如@ivarni所建議的，額外的跨度是由空白造成的！

爲了防止這種情況，在支撐表達式周圍沒有空格的情況下編寫代碼。

<ReactElement>{noRoomForWhiteSpace}</ReactElement>

來源

2014-10-22 19:05:31 kaid

它實際上一些特殊字符（非在編輯器中可見）悄悄地出現的代碼。（可能發生，如果你有複製粘貼）。對我來說這是\u2028。檢查生成的JavaScript文件以查看代碼中包含哪些額外字符。爲了擺脫它，你可以刪除導致它，並再次鍵入它的行（而不是複製和粘貼）

來源

2015-11-16 09:34:15 aqs

React.js中重複跨度的刪除？

回答

相關問題