lokalizacja w answer.js sugestiach i przykładach

Question

Jesteśmy na temat decyzji, gdzie iść na lokalizację w react.js, na pewno są sposoby na lokalizację, ale jaka byłaby twoja rekomendacja?

Próbowałem Yahoo reagować-Intl ale bezskutecznie:

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

daje błąd: Nie można odczytać własności „_mockedReactClassConstructor” undefined

spędził kilka godzin próbują rozwiązać ten problem, nadal można” t resolve -> zrezygnować

Próbowałem l20n przez Mozillę, ale nie wiem, czy to będzie działać z react.js

zastanawiać co byś sugge st dla lokalizacji react.js, dziękuję!

Answer 1

to już za kilka miesięcy. Być może istnieje więcej modułów lokalizacyjnych. Ale jeśli chcesz zrobić coś prostego i obejść przy użyciu tak wielu modułów (używamy tylko niezbędnych modułów zmniejszających obciążenie), oto konfiguracja:

Załóżmy, że mamy stronę główną i stronę logowania (w konfiguracji routera, rzeczy oparte są na stronie root)

korzenia

1. mają stan zwany i18n (w getInitialState)
2. wykryć język i init i18n
3. ustawić obiekt t o stan i18n
4. w render() użyć czegoś jak ten

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

i zdać i18n dół rekwizyty. lub jeśli chcesz, używając mixins.

logowanie

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

Answer 2

w odpowiedzi na moje pytanie. zdecydowaliśmy się nie używać yahoo's response-intl, ale zamiast tego używamy i18next. Ważne jest, aby używać czegoś bardziej stabilnego i popularnego w naszej produkcji.

to, co możesz zrobić, to zainicjować i18next w katalogu głównym swojej strony i przekazać to poprzez rekwizyty. Użyj stanu, aby zapobiec renderowaniu strony przed zainicjowaniem i18next.

Answer 3

Myślę, że może używać FormattedNumber od React-Intl do celu.
Co należy wziąć pod uwagę, jeśli używasz i18next, który zapewnia tylko tłumaczenia, a nie Times/Dates/Currency itp., Będziesz potrzebować dodatkowych bibliotek, takich jak Moment.js. React-Intl daje ci wszystko. Uważaj na IE < 9, musisz mieć usługę polyfill lub polyfill Intl.js (https://cdn.polyfill.io/v2/docs/). Zauważyłem, że pakowanie w sieci Web jest problematyczne podczas ładowania tego polyfill.

Wreszcie, React-router najnowszej wersji zobaczyć https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

Prawdopodobnie znajdziesz sekcję RouteHandler wartościowego, użyj {React.cloneElement (this.props.children {someExtraProp: coś})} Aby przekazać swoje nieczystości/wiadomości do widoków.

nadzieję, że pomoże

Answer 4

jest teraz reagują-i18next https://github.com/i18next/react-i18next prace z i18next> = 2.0.0