web-dev-qa-db-ja.com

reactjsでローカリゼーションを実装する方法は？

文字列値を定義するには、reactjsにローカリゼーションを実装する必要があります。どうすれば実装できますか？

1つのリンクがあります https://www.npmjs.com/package/react-localization ですが、それを追加するための正しい手順を取得できません。

私は次の手順で試しました：

  1. ES6にコンポーネントを追加しています：
    class Home extends React.Component
    {
        constructor(props) {
            super(props);
        }
        render() {
            return (
              <Text>{strings.how}</Text>
             );
        }
    }
  1. ローカリゼーションコードを次のように追加しました。
    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"
        }
    });

今、あなたが上記を見るならば：-{strings.how}ローカリゼーションで定義されているので、文字列値を取得できるはずですが、私はできませんそれを行うには。

reactjslocalizationlocalizable.strings
14
Gorakh Nath

Yahooは、ローカリゼーションを実装するためのパッケージをReactで探しています： https://github.com/yahoo/react-intl に作成しました。 「複数形化と翻訳の処理を含む日付、数字、文字列」を処理します。

10
Oskar

npm install react-localization

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

言語固有のデータをJSONファイルまたは_.js_ファイルに配置できます。現在のファイルでそのファイルを呼び出し、そのオブジェクトをnew LocalizedStrings()に渡します。

例：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};
_

現在のファイルに_import { data } from './data.js'_としてインポートします。次に、let strings = new LocalizedStrings({data});として初期化できます

7
Raj Rj