ReactJS: Textausrichtung funktioniert nicht

Question

Ich habe text-align: justify verwendet, um Menüs gleichmäßig zu verteilen. Nach diesem und es funktioniert perfekt.

Es bricht jedoch, wenn ich ReactJS verwende, um die Ansicht zu erstellen. Ein Vergleich kann hier gefunden werden: http://jsfiddle.net/j7pLprza/1/. Ich benutze diese beiden einfachen Komponenten, um die Menüs zu füllen:

var MenuItem = React.createClass({ 
    render: function() { 
     return (
      <li> 
       {this.props.title} 
      </li> 
     ); 
    } 
}); 

var TopMenus = React.createClass({ 
    render: function() { 
     return (
      <div className="break"> 
      <nav> 
       <ul> 
        {this.props.menus.map(function(menu) { 
         return (<MenuItem title={menu.title} />); 
        })} 
       </ul> 
      </nav> 
      </div> 
     ); 
    } 
}); 

Nach Exploration, ich denke, es durch ReactJS verursacht wird, die alle Zeilenumbruch und white-space nach <li> Artikel entfernt. Dies wird text-align: justify deaktivieren.

Es passiert auch für AngularJS (aber ich kann es mit einer add-space-all Richtlinie beheben).

Ich erreichte nur dieses Problem nach dem googeln: https://github.com/facebook/jsx/issues/19. Aber ich habe mich schnell verlaufen.

Ich habe versucht, einige zusätzliche Inhalte wie {'\n'} und {' '} hinzuzufügen, aber ReactJS meldet Syntaxfehler.

Bitte helfen. Vielen Dank.

---

UPDATE 1:

Nach der akzeptierten Antwort, meine Menüs funktioniert in Chrome Emulator. Allerdings, wenn ich von iPhone 5c (Chrome-Browser) besuche, ist das Ergebnis, als ob der zusätzliche Speicherplatz nicht erkannt wird.

Nach verschiedenen Kombinationen versuchen, diese funktionieren:

var TopMenus = React.createClass({ 
    render: function() { 
     return (
      <div className="break"> 
      <nav> 
       <ul> 
        {this.props.menus.map(function(menu) { 
         return [(<MenuItem title={menu.title} />), '&nbsp; ']; 
        })} 
       </ul> 
      </nav> 
      </div> 
     ); 
    } 
}); 

Bitte beachten, dass der zusätzliche Platz in   notwendig ist. Fehlende entweder   oder bricht es.

Es funktioniert dann auf Nexus 7, iPhone 5c (Chrome und Safari). Allerdings kenne ich den genauen Grund nicht. Wenn jemand weiß, bitte helfen Sie.

---

UPDATE 2:

Noch Buggy. Also wechselte ich zu Flex layout. Und es ist super einfach. Ein Beispiel ist: http://jsfiddle.net/j7pLprza/4/

Answer 1

React entfernt in diesem Fall nichts, da zwischen den Elementen kein Leerraum vorhanden ist. Wenn Sie Leerräume zwischen den Elementen li hinzufügen möchten, können Sie das Array mit ' ' verschachteln. In diesem Fall ist es so einfach wie eine Anordnung aus der .map Funktion zurückkehrt (Arrays abgeflacht sind):

var TopMenus = React.createClass({ 
    render: function() { 
     return (
      <div className="break"> 
      <nav> 
       <ul> 
        {this.props.menus.map(function(menu) { 
         return [<MenuItem title={menu.title} />, ' ']; 
        })} 
       </ul> 
      </nav> 
      </div> 
     ); 
    } 
}); 

Beispiel: https://jsfiddle.net/j7pLprza/2