2015-04-16 21 views
5

Ho utilizzato text-align: justify per distribuire uniformemente i menu. A seguito di questo tutorial e funziona perfettamente.ReactJS: allineamento del testo non giustificato

Tuttavia, si interrompe quando uso ReactJS per creare la vista. Un confronto può essere trovato qui: http://jsfiddle.net/j7pLprza/1/. Io uso queste due componenti semplici per popolare i menu:

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

Dopo l'esplorazione, penso che è causata da ReactJS, che rimuove tutte le linee-break e bianco-spazio dopo <li> articoli. Questo disabiliterà text-align: justify.

Succede anche per AngularJS (ma posso correggerlo usando una direttiva add-space-all).

Ho raggiunto solo questo problema dopo la ricerca su google: https://github.com/facebook/jsx/issues/19. Ma mi sono rapidamente perso.

Ho provato ad aggiungere del contenuto extra, ad esempio {'\n'} e {' '}, ma ReactJS segnala errori di sintassi.

Per favore aiuto. Grazie.


UPDATE 1:

In seguito alla risposta accettata, i miei menu funziona in Chrome Emulator. Tuttavia, quando visito da iPhone 5c (browser Chrome), il risultato è come se lo spazio extra non fosse riconosciuto.

Dopo aver provato diverse combinazioni, questo funziona:

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

Si prega di notare che lo spazio in più in &nbsp; è necessario. Manca &nbsp; o interrompe.

Funziona quindi su Nexus 7, iPhone 5c (Chrome e Safari). Tuttavia, non conosco la ragione esatta. Se qualcuno lo sa, per favore aiutatemi.


UPDATE 2:

Ancora buggy. Così sono passato a Flex layout. Ed è super facile. Un esempio è: http://jsfiddle.net/j7pLprza/4/

+1

React non rimuove nulla in questo caso, poiché non v'è spazio tra elementi in primo luogo. Se si desidera aggiungere spazi bianchi tra gli elementi li, è possibile interlacciare l'array con ''''. Esempio: http://jsfiddle.net/j7pLprza/2/ –

+0

Grazie, @FelixKling. Funziona!. Per favore mettilo nella risposta. – Joy

+0

Non ho risposto perché è un po 'fastidioso da un iPad.Tuttavia, risulta che funziona abbastanza bene con l'app StackExchange :) –

risposta

9

React non rimuove nulla in questo caso, poiché non vi è spazio tra gli elementi in primo luogo. Se si desidera aggiungere spazi bianchi tra gli elementi li, è possibile interlacciare l'array con ' '. In questo caso è semplice come restituendo un array dalla funzione .map (array sono appiattite):

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

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

+0

Quindi, senza uno spazio bianco tra di loro, tutto il 'li' insieme sarà considerato come una singola" parola "che è radunata insieme? – sabithpocker

+0

Ciao, @FelixKling. Il codice funziona bene su Chrome Emulator, ma non funziona quando visito da un vero iPhone 5, in cui il 'justify' sembra non avere alcun effetto. Ho provato a visitare il JSFiddle che hai fornito e va bene (dal mio iPhone). Adesso temo di perdere qualcosa. Potresti fornire qualche suggerimento su questo problema? – Joy

+0

@ShaojiangCai avviso ', ''' alla fine. Maggiori informazioni qui: http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly –

Problemi correlati