Reagieren-intl multi-language-app: änderung-Sprachen und übersetzungen-Speicher

Habe ich darauf reagiert-router-app und möchte hinzufügen: i18n. In reagieren-intl Beispiel root-Komponente verpackt in IntlProvider:

ReactDOM.render(
<IntlProvider locale="en">
    <App />
</IntlProvider>,
document.getElementById('container')

);

Aber es ist nur ein locale (Spracheinstellung). So aktualisieren Sie die app für das hinzufügen von anderen Sprachen und wie ist der beste Weg, übersetzungen zu speichern?

InformationsquelleAutor qwe asd | 2016-03-03

18

Ich habe vor dem gleichen problem, und das ist, was ich herausgefunden habe:

Um die Sprache zu ändern, die ich verwendet Lösung hier, die im Grunde ist verbindlich IntlProvider zu ReduxStore mit Connect-Funktion. Auch vergessen Sie nicht, um wichtige re-render-Komponenten auf Sprache ändern. Dies ist im Grunde der gesamte code:

Dies ist ConnectedIntlProvider.js nur bindet Standard IntlProvider(beachten Sie die-Taste prop, fehlt im original-Kommentar auf github)
```
import { connect } from 'react-redux';
import { IntlProvider } from 'react-intl';

//This function will map the current redux state to the props for the component that it is "connected" to.
//When the state of the redux store changes, this function will be called, if the props that come out of
//this function are different, then the component that is wrapped is re-rendered.
function mapStateToProps(state) {
  const { lang, messages } = state.locales;
  return { locale: lang, key: lang, messages };
}

export default connect(mapStateToProps)(IntlProvider);
```
Und dann in deinem Eintrag-point-Datei:
```
//index.js (your top-level file)

import ConnectedIntlProvider from 'ConnectedIntlProvider';

const store = applyMiddleware(thunkMiddleware)(createStore)(reducers);

ReactDOM.render((
  <Provider store={store}>
    <ConnectedIntlProvider>
      <Router history={createHistory()}>{routes}</Router>
    </ConnectedIntlProvider>
  </Provider>
), document.getElementById( APP_DOM_CONTAINER ));
```
Nächste, was zu tun ist, um einfach zu implementieren reducer, die für die Verwaltung Gebietsschema und machen action-Macher um die Sprache zu ändern auf Nachfrage.

Als der beste Weg zum speichern von übersetzungen - fand ich viele Diskussionen über dieses Thema und die situation scheint zu sein, ziemlich verwirrt, ehrlich gesagt, ich bin ziemlich verblüfft, dass die Macher reagieren-intl Fokus so sehr auf die Datums-und Zahlenformate und vergessen über die übersetzung. Also, ich weiß nicht, den absolut richtigen Weg, es zu handhaben, aber das ist was ich tun:

Erstellen Ordner "locales" und innen schaffen Haufen von Dateien wie "en.js", "fi.js", "ru.js" usw. Im Prinzip alle Sprachen, die Sie arbeiten mit.

In jeder Datei exportieren json-Objekt mit übersetzungen wie diese:
```
export const ENGLISH_STATE = {
  lang: 'en',
  messages: {
      'app.header.title': 'Awesome site',
      'app.header.subtitle': 'check it out',
      'app.header.about': 'About',
      'app.header.services': 'services',
      'app.header.shipping': 'Shipping & Payment',
  }
}
```
Anderen Dateien haben genau die gleiche Struktur, aber mit übersetzten Zeichenketten innen.

Dann im Getriebe ist verantwortlich für Sprache, ändern, importieren, alle Staaten aus diesen Dateien und laden Sie Sie in redux speichern, sobald die Aktion zum ändern der Sprache ausgelöst. Die Komponente erstellt im vorherigen Schritt wird weitergeben von änderungen an IntlProvider und neue locale stattfinden wird. Ausgabe, die es auf der Seite mit <FormattedMessage> oder intl.formatMessage({id: 'app.header.title'})} Lesen Sie mehr auf, dass auf Ihrer github-wiki.

Sie haben einige DefineMessages Funktion gibt, aber ehrlich gesagt konnte ich nicht finden, eine gute Informationen, wie es zu benutzen, kann man im Prinzip vergessen, und Sie werden OK.
- In mobx können Sie github.com/Sqooba/mobx-react-intl
- Es funktioniert perfectIy mit redux. Ich habe versucht, diesen Ansatz mit apollo, aber es funktioniert einfach nicht. Ich bin verzweifelt.
InformationsquelleAutor ScienceSamovar

Mit einer neuen Kontext-API-ich glaube, es ist nicht erforderlich, um redux jetzt:

IntlContext.jsx

import React from "react";
import { IntlProvider, addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import de from "react-intl/locale-data/de";

const deTranslation = { 
  //... 
};
const enTranslation = { 
  //... 
};

addLocaleData([...en, ...de]);

const Context = React.createContext();

class IntlProviderWrapper extends React.Component {
  constructor(...args) {
    super(...args);

    this.switchToEnglish = () =>
      this.setState({ locale: "en", messages: enTranslation });

    this.switchToDeutsch = () =>
      this.setState({ locale: "de", messages: deTranslation });

    //pass everything in state to avoid creating object inside render method (like explained in the documentation)
    this.state = {
      locale: "en",
      messages: enTranslation,
      switchToEnglish: this.switchToEnglish,
      switchToDeutsch: this.switchToDeutsch
    };
  }

  render() {
    const { children } = this.props;
    const { locale, messages } = this.state;
    return (
      <Context.Provider value={this.state}>
        <IntlProvider
          key={locale}
          locale={locale}
          messages={messages}
          defaultLocale="en"
        >
          {children}
        </IntlProvider>
      </Context.Provider>
    );
  }
}

export { IntlProviderWrapper, Context as IntlContext };

Main App.jsx Komponente:

import { Provider } from "react-redux";
import {  IntlProviderWrapper } from "./IntlContext";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <IntlProviderWrapper>
          ...
        </IntlProviderWrapper>
      </Provider>
    );
  }
}

LanguageSwitch.jsx

import React from "react";
import { IntlContext } from "./IntlContext";

const LanguageSwitch = () => (
  <IntlContext.Consumer>
    {({ switchToEnglish, switchToDeutsch }) => (
      <React.Fragment>
        <button onClick={switchToEnglish}>
          English
        </button>
        <button onClick={switchToDeutsch}>
          Deutsch
        </button>
      </React.Fragment>
    )}
  </IntlContext.Consumer>
);

//with hooks:
const LanguageSwitch2 = () => {
  const { switchToEnglish, switchToDeutsch } = React.useContext(IntlContext);
  return (
    <>
      <button onClick={switchToEnglish}>English</button>
      <button onClick={switchToDeutsch}>Deutsch</button>
    </>
  );
};

export default LanguageSwitch;

Habe ich einen repository veranschaulicht diese Idee.
Und auch codesandbox Beispiel.

Ziemlich gut funktioniert. Ich bin nur neugierig, ob es möglich, dies zu tun mit useContext statt. So würden Sie in der Lage sein, um useContext(IntlContext) und befestigen Sie switchToEnglish etc auf den Kontext?
sicher, dass nur erfordert der export der gesamte Kontext, prüfen, Bearbeiten und link zu codesandbox.
Ich danke Ihnen so sehr. Sieht toll aus, und genau das, was ich brauchte!! Das verdient imo. die akzeptierte Antwort. 🙂
Tomasz machten mir zu schaffen, eine Verwandte Frage hier: stackoverflow.com/questions/55541089/... also entweder könnte ich es entfernen, oder Sie könnten einfach einen link zu deiner Antwort hier und ich werde es akzeptieren - bis auf dich 🙂
Ich bin froh, dass es hilft!
Achten Sie darauf. Festgestellt, dass in [email protected] addLocaleData entfernt wurde, github.com/formatjs/react-intl/blob/master/docs/...

InformationsquelleAutor Tomasz Mularczyk

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.