Wie implementieren Lokalisierung in reactjs?

wir implementieren müssen, um die Lokalisierung in reactjs zu definieren string
Wert(en). Wie kann ich das implementieren?

Einen link gibt es https://www.npmjs.com/package/react-localization, aber ich bin nicht immer die Schritte zum hinzufügen.

Habe ich versucht, indem Sie die folgenden Schritte aus:-

  1. Ich füge meine Komponente in ES6:--

    class Home extends Reagieren.Komponente
    {
    Konstruktor(props) {
    super(props);

    }

render() {
    return (
      <Text>{strings.how}
     </Text>

);
}

    }

  2. Habe ich die Lokalisierung-code:-

import LocalizedStrings aus 'reagieren-Lokalisierung";

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

Nun, wenn Sie, siehe oben :- {strings.wie} ich sollte in der Lage
um die Zeichenfolgen-Wert definiert, bei der Lokalisierung, aber ich bin nicht
in der Lage, es zu tun.

InformationsquelleAutor jack | 2016-11-22

  1. 9

    Yahoo hat ein Paket für die Umsetzung Lokalisierung in Reagieren, könnte das sein, was du suchst: https://github.com/yahoo/react-intl. Es kümmert sich um "Daten, zahlen und Zeichenfolgen, einschließlich der Pluralisierung und Handhabung von übersetzungen".

    InformationsquelleAutor Oskar

  2. 0

    npm install reagieren-Lokalisierung

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

    u können Ihre Sprache bestimmte Daten in eine JSON-Datei, oder oder .js - Datei. rufen Sie diese Datei in die aktuelle Datei und übergeben Sie dieses Objekt an new LocalizedStrings().

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

    in die aktuelle Datei importieren Sie es als import { data } from './data.js';
    und dann können Sie Sie initialisieren, wie let strings = new LocalizedStrings({data});

    InformationsquelleAutor Raj Rj

Schreibe einen Kommentar