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} />), ' '];
})}
</ul>
</nav>
</div>
);
}
});
Si prega di notare che lo spazio in più in
è necessario. Manca
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/
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/ –
Grazie, @FelixKling. Funziona!. Per favore mettilo nella risposta. – Joy
Non ho risposto perché è un po 'fastidioso da un iPad.Tuttavia, risulta che funziona abbastanza bene con l'app StackExchange :) –