web-dev-qa-db-fra.com

Comment implémenter la localisation dans reactjs?

Nous devons implémenter la localisation dans reactjs pour définir la ou les valeurs de chaîne. Comment puis-je implémenter cela?

Un lien est là https://www.npmjs.com/package/react-localization , mais je n'obtiens pas les étapes correctes pour l'ajouter.

J'ai essayé en suivant les étapes:

  1. J'ajoute mon composant dans ES6:
    class Home extends React.Component
    {
        constructor(props) {
            super(props);
        }
        render() {
            return (
              <Text>{strings.how}</Text>
             );
        }
    }
  1. J'ai ajouté le code de localisation comme: -
    import LocalizedStrings from 'react-localization';
    let strings = new LocalizedStrings({
        en:{
            how:"How do you want your Egg today?",
            boiledEgg:"Boiled Egg",
            softBoiledEgg:"Soft-boiled Egg",
            choice:"How to choose the Egg"
        },
        it: {
            how:"Come vuoi il tuo uovo oggi?",
            boiledEgg:"Uovo sodo",
            softBoiledEgg:"Uovo alla coque",
            choice:"Come scegliere l'uovo"
        }
    });

Maintenant, si vous voyez ci-dessus: - {strings.how} je devrais pouvoir obtenir la valeur des chaînes telle qu'elle est définie dans la localisation mais je ne suis pas en mesure pour le faire.

reactjslocalizationlocalizable.strings
14
Gorakh Nath

Yahoo a créé un package pour implémenter la localisation dans React qui pourrait être ce que vous recherchez: https://github.com/yahoo/react-intl . Il s'occupe des "dates, nombres et chaînes, y compris la pluralisation et la gestion des traductions".

10
Oskar

npm install react-localisation

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import LocalizedStrings from 'react-localization';

let strings = new LocalizedStrings({
  en:{
    how:"How do you want your Egg today?",
    boiledEgg:"Boiled Egg",
    softBoiledEgg:"Soft-boiled Egg",
    choice:"How to choose the Egg"
  },
  it: {
    how:"Come vuoi il tuo uovo oggi?",
    boiledEgg:"Uovo sodo",
    softBoiledEgg:"Uovo alla coque",
    choice:"Come scegliere l'uovo"
  }
 });

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'en'
    }

    this.handleLanguageChange = this.handleLanguageChange.bind(this);
  }

  handleLanguageChange(e) {
    e.preventDefault();
    let lang = e.target.value;
    this.setState(prevState => ({
      language: lang
    }))
  }

  render() {
    strings.setLanguage(this.state.language);
    return (
      <div>
        Change Language: <select onChange={this.handleLanguageChange}>
          <option value="en">En- English</option>
          <option value="it">It- Italian</option>
        </select>
        <br /><br />
        {strings.how}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

vous pouvez mettre vos données spécifiques à la langue dans un fichier JSON ou un fichier .js. appelez ce fichier dans votre fichier actuel et passez cet objet à new LocalizedStrings().

Exemple: data.js

const data = {
  en:{
    how:"How do you want your Egg today?",
    boiledEgg:"Boiled Egg",
    softBoiledEgg:"Soft-boiled Egg",
    choice:"How to choose the Egg"
  },
  it: {
    how:"Come vuoi il tuo uovo oggi?",
    boiledEgg:"Uovo sodo",
    softBoiledEgg:"Uovo alla coque",
    choice:"Come scegliere l'uovo"
  }
}
export {data};

dans votre fichier actuel, importez-le comme import { data } from './data.js'; puis vous pouvez initialiser comme let strings = new LocalizedStrings({data});

7
Raj Rj