如何在reactjs中实现本地化? [英] How to implement localization in reactjs?

问题描述

我们需要在reactjs中实现本地化以定义字符串值.我该如何实施?

We need to implement the localization in reactjs to define the string value(s). How can I implement that?

有一个链接 https://www.npmjs.com/package/react-localization ，但是我没有找到正确的步骤来添加它.

One link is there https://www.npmjs.com/package/react-localization, but I am not getting the correct steps to add that.

我已尝试通过以下步骤操作:

I have tried by following steps:

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} ，我应该能够获取本地化中定义的字符串值，但我不是能够做到.

Now if you will see above :- {strings.how} I should able to get the strings value as it is defined in localization but I am not able to do it.

推荐答案

npm install react-localization

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

u可以将特定于语言的数据放入JSON文件或 .js 文件中.在当前文件中调用该文件，然后将该对象传递给 new LocalizedStrings().

u can put your language specific data in a JSON file or or .js file. call that file in your current file and pass that object to 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}从'./data.js'导入；然后可以初始化为 let strings = new LocalizedStrings({data});

in your current file import it as import { data } from './data.js'; and then you can initialise as let strings = new LocalizedStrings({data});

您可以在此处阅读详细的文章-反应-带有钩子的本地化

You can read the detailed article here - react-localization with hooks

检查正在运行的演示此处

这篇关于如何在reactjs中实现本地化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！