2014-10-22 13 views
5

React esegue il rendering di più campate, solo con il valore effettivo. Qualche consiglio su come risolvere questo problema:Riduzione degli intervalli ripetuti in React.js?

enter image description here

E se ne importa, il nome dell'utente, non è supponiamo di essere in un arco, ma come innerHTML di ".chatUser"

Il il metodo di rendering effettivo è breve:

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

Grazie!

+5

Rimuove gli spazi bianchi attorno a '{this.createShortUsername()}' fa qualcosa? Sospetto che gli span vengano aggiunti al contenuto dinamico separato (il nome utente) dal contenuto statico (gli spazi bianchi). – ivarni

+1

React avvolge qualsiasi nodo di testo mobile in un intervallo in modo che possa assegnarlo un ID e richiamarlo rapidamente in un secondo momento durante gli aggiornamenti e la riconciliazione. Come suggerito da @ivarni, gli spazi bianchi iniziali e finali possono generare span vuoti. Se questo si verifica sul server e non hai bisogno del markup extra (quindi vuoi semplicemente '' '

shortname
' '', puoi cercare [React.renderComponentToStaticMarkup] (http://facebook.github.io/react/ docs/top-level-api.html # react.rendercomponenttostaticmarkup) – trekforever

+0

Questo l'ha risolto! voi ragazzi siete fantastici, grazie mille! – kaid

risposta

10

Come suggerito da @ivarni, gli span aggiuntivi sono stati causati da spazi bianchi!

Per evitare questo scrivere il codice senza spazi bianchi attorno alle espressioni rinforzate.

<ReactElement>{noRoomForWhiteSpace}</ReactElement> 
0

la sua realtà alcuni caratteri speciali (non visibile nel vostro editor) che si insinua nel codice. (Probabilmente se avessi copia-incollato). Per me era \u2028. Controlla il file javascript generato per vedere quali caratteri extra sono stati inseriti nel codice. Per eliminarlo, è possibile rimuovere la riga che lo ha causato e digitarlo di nuovo (anziché copiare e incollare)