Réagir-intl multi-langue de l'app: évolution des langues et des traductions de stockage

J'ai pu réagir-routeur application et souhaitez ajouter i18n. Dans réagissent-intl exemple composant racine enveloppé dans IntlProvider:

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

);

Mais il y a un seul endroit. Comment mettre à jour l'app pour ajouter d'autres langues et comment est la meilleure façon de stocker les traductions?

InformationsquelleAutor qwe asd | 2016-03-03

18

Que j'ai rencontré le même problème et c'est ce que j'ai trouvé:

Pour changer de langue, j'ai utilisé la solution fournie ici, qui est essentiellement la liaison IntlProvider à ReduxStore avec la fonction de connexion. Aussi n'oubliez pas d'inclure la clé de re-rendre les composants sur le changement de langue. C'est, fondamentalement, tout le code:

C'est ConnectedIntlProvider.js, tout se lie par défaut IntlProvider(attention, la clé prop qui est absent dans le commentaire original sur 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);
```
Et puis dans votre point d'entrée du fichier:
```
//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 ));
```
Prochaine chose à faire est de simplement mettre en œuvre réducteur pour la gestion locale et de rendre l'action des créateurs de changer de langue sur demande.

Que la meilleure façon de stocker des traductions - j'ai trouvé beaucoup de discussions sur ce sujet et la situation semble être assez confus, honnêtement, je suis assez dérouté que les décideurs de réagir-intl se concentrer autant sur la date et le numéro de formats et d'oublier au sujet de la traduction. Donc, je ne sais pas absolument la bonne façon de le gérer, mais c'est ce que je fais:

Créer un dossier "locales" et à l'intérieur de créer des tas de fichiers comme "en.js", "fi.js", "ru.js", etc. Fondamentalement, toutes les langues que vous travaillez avec.

Dans chaque fichier d'exportation d'objet json avec des traductions comme ceci:
```
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',
  }
}
```
Autres fichiers ont exactement la même structure, mais avec des chaînes traduites à l'intérieur.

Puis dans le réducteur qui est responsable de la modification de la langue d'importation de tous les états à partir de ces fichiers et de les charger dans redux magasin dès que l'action pour le changement de langue est distribué. Votre composant créé à l'étape précédente va propager les modifications à IntlProvider et de nouveaux paramètres régionaux aura lieu. Sortie sur la page à l'aide de <FormattedMessage> ou intl.formatMessage({id: 'app.header.title'})}, pour en savoir plus sur leur github wiki.

Ils ont quelques DefineMessages fonction de là, mais honnêtement, je n'arrivais pas à trouver une bonne information de la façon de l'utiliser, fondamentalement, vous pouvez l'oublier et être OK.
- Dans mobx vous pouvez utiliser github.com/Sqooba/mobx-react-intl
- Il fonctionne perfectIy avec redux. J'ai essayé cette approche avec apollon, mais il ne fonctionne tout simplement pas. Je suis désespérée.
InformationsquelleAutor ScienceSamovar

Avec un nouveau Contexte de l'API, je crois qu'il n'est pas nécessaire d'utiliser redux maintenant:

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

Principal App.jsx composant:

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;

J'ai créé un référentiel qui illustre cette idée.
Et aussi codesandbox exemple.

Fonctionne assez bien. Je suis juste curieux de savoir si il est possible de le faire avec useContext à la place. Donc, si vous voulez être en mesure de useContext(IntlContext) et fixez switchToEnglish etc pour le contexte?
bien sûr, qui ne nécessite que de l'exportation de l'ensemble du contexte, cochez la case modifier et lien vers codesandbox.
Je vous remercie beaucoup. Ressemble beaucoup, et juste ce dont j'avais besoin!! Cela mérite de l'omi. pour être accepté de répondre. 🙂
Tomasz je n'ai créer une question connexe ici: stackoverflow.com/questions/55541089/... donc, soit je peut le supprimer, ou vous pouvez simplement le lien vers la réponse à votre question et je vais l'accepter - à vous 🙂
Je suis content que ça aide!

InformationsquelleAutor Tomasz Mularczyk

Vous devez vous connecter pour publier un commentaire.