如何在 reactjs 中实现本地化?
How to implement localization in reactjs?
We need to implement the localization in reactjs to define the string
value(s). How can I implement that?
那里有一个 link https://www.npmjs.com/package/react-localization,但我没有得到正确的步骤来添加它。
我试过以下步骤:
- 我正在 ES6 中添加我的组件:
class Home extends React.Component
{
constructor(props) {
super(props);
}
render() {
return (
<Text>{strings.how}</Text>
);
}
}
- 我已将本地化代码添加为:-
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"
}
});
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.
Yahoo 已经创建了一个用于在 React 中实现本地化的包,这可能就是您正在寻找的:https://github.com/yahoo/react-intl。它负责“日期、数字和字符串,包括复数和处理翻译”。
2021 年更新: 这是现在的包裹:
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});
你可以在这里阅读详细的文章 - react-localization with hooks
检查工作演示Here
我们使用react-i18next。然后使用 i18nexus 自动翻译和管理翻译。
We need to implement the localization in reactjs to define the string value(s). How can I implement that?
那里有一个 link https://www.npmjs.com/package/react-localization,但我没有得到正确的步骤来添加它。
我试过以下步骤:
- 我正在 ES6 中添加我的组件:
class Home extends React.Component
{
constructor(props) {
super(props);
}
render() {
return (
<Text>{strings.how}</Text>
);
}
}
- 我已将本地化代码添加为:-
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"
}
});
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.
Yahoo 已经创建了一个用于在 React 中实现本地化的包,这可能就是您正在寻找的:https://github.com/yahoo/react-intl。它负责“日期、数字和字符串,包括复数和处理翻译”。
2021 年更新: 这是现在的包裹:
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});
你可以在这里阅读详细的文章 - react-localization with hooks
检查工作演示Here
我们使用react-i18next。然后使用 i18nexus 自动翻译和管理翻译。