localizzazione in react.js suggerimenti ed esempio

Question

Siamo sulla decisione su dove andare sulla localizzazione in react.js, sicuramente ci sono modi per fare localizzazione, ma quale sarebbe la vostra raccomandazione?

ho cercato di Yahoo reagiscono-Intl ma inutilmente:

var ReactIntl = require('react-intl') // we did npm install react-intl 
// somewhere in the react component 
render: function() { 
    return (<div><ReactIntl.Number>{600}</ReactIntl.Number></div>); 
} 

dà l'errore: Impossibile leggere la proprietà '_mockedReactClassConstructor' di indefinito

trascorso qualche ora tentare di risolvere questo errore, ancora possibile' t risolvere -> rinunciare

ho provato l20n da Mozilla, ma non so se funzionerà con react.js

chiedendo cosa vorresti sugge st per la localizzazione react.js, grazie!

Answer 1

è passato un paio di mesi da oggi. Forse ci sono più moduli di localizzazione là fuori. Ma se vuoi fare qualcosa di semplice e bypassare usando così tanti moduli (usiamo solo moduli essenziali per ridurre il carico), ecco la configurazione:

diciamo che abbiamo una pagina radice e una pagina di login (sulla nostra configurazione del router, cose si basano sulla pagina radice)

radice

1. hanno uno stato chiamato i18n (in getInitialState)
2. rilevare la lingua e la init i18n
3. impostare l'oggetto t o i18n stato
4. a render() usare qualcosa di simile

render: function() { 
 
    var route; 
 
    if (this.state.configLoaded && this.state.i18n) { 
 
     route = (
 
      <RouteHandler i18n={this.state.i18n} onLanguageChange={this._languageChangedHandler} /> 
 
     ); 
 
    } 
 
    return (
 
     <div> 
 
      <Loading /> 
 
      {route} 
 
     </div> 
 
    ); 
 
}

e si passa i18n giù attraverso oggetti di scena. o se lo desideri, usando i mixins.

login

this.props.i18n.t('...') 

Answer 2

in risposta alla mia domanda. abbiamo deciso di non usare yahoo's react-intl ma di usare invece i18next. Considerare l'utilizzo di qualcosa di più stabile e popolare per la nostra produzione è importante.

ciò che si può fare è inizializzare i18next nella radice della pagina e passarlo attraverso i puntelli. Utilizzare uno stato per impedire il rendering della pagina prima che inizino i18next.

Answer 3

Penso che forse uso FormattedNumber da React-Intl per il vostro scopo.
Cose da considerare, se si utilizza i18next che fornisce solo traduzioni, non orari/date/valuta ecc., Occorrono librerie aggiuntive come Moment.js. React-Intl ti dà tutto. Attenzione per IE < 9, è necessario il servizio polyfill o polyfill Intl.js (https://cdn.polyfill.io/v2/docs/). Ho trovato che il webpack è problematico nel caricare questo polyfill.

Infine, con Reagire-Router ultima versione vedono https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

probabilmente troverai la sezione sulla RouteHandler pena, utilizzare {React.cloneElement (this.props.children, {someExtraProp: qualcosa})} Per far passare i tuoi loacoli/messaggi in visualizzazioni.

Speranza che aiuta

Answer 4

ora c'è reagire-i18next https://github.com/i18next/react-i18next opere con i18next> = 2.0.0