2014-10-22 6 views
5

React rendert mehrere Spannen, nur mit dem tatsächlichen Wert. Jede Beratung, wie man dieses Problem beheben:Rid der wiederholten Spannen in React.js?

enter image description here

Und wenn es eine Rolle, der Name des Benutzers ist wohl nicht in einer Spanne zu sein, aber als innerHTML- von „.chatUser“

Der tatsächliche Render-Methode ist kurz:

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

Vielen Dank!

+5

Macht das Entfernen der Leerzeichen um '{this.createShortUsername()}' irgendetwas? Ich vermute, dass die Spannen hinzugefügt werden, um dynamischen Inhalt (den Benutzernamen) von statischem Inhalt (den Whitespaces) zu trennen. – ivarni

+1

React umschließt alle unverankerten Textknoten in einem Bereich, sodass er ihnen eine ID zuweisen und bei Aktualisierungen und Abgleichen später schnell darauf zurückkommen kann. Wie @ivarni vorgeschlagen hat, können führende und nachfolgende Leerräume leere Bereiche generieren. Wenn dies auf dem Server geschieht und Sie das zusätzliche Markup nicht benötigen (also wollen Sie nur '' '

shortname
' '', können Sie in [React.renderComponentToStaticMarkup] (http://facebook.github.io/react/ docs/top-level-api.html # react.rendercomponenttostaticmarkup) – trekforever

+0

Das hat es behoben! Ihr seid großartig, vielen Dank! – kaid

Antwort

10

Wie von @ivarni vorgeschlagen, wurden die zusätzlichen Spannen durch Leerzeichen verursacht!

Um dies zu verhindern, schreiben Sie Ihren Code ohne Leerzeichen um die formatierten Ausdrücke.

<ReactElement>{noRoomForWhiteSpace}</ReactElement> 
0

Sein wirklich einige Sonderzeichen (nicht sichtbar in Ihrem Editor), die in den Code kriecht. (Wahrscheinlich, wenn Sie Kopie kleistert haben). Für mich war es \u2028. Überprüfen Sie die generierte Javascript-Datei, um zu sehen, welche zusätzlichen Zeichen in den Code aufgenommen wurden. Um es loszuwerden, können Sie die Zeile, die es verursacht hat, entfernen und es erneut eingeben (im Gegensatz zum Kopieren und Einfügen)