Question

我正在尝试在反应应用程序的基本版本中实现语言支持（使用npm create-react等创建...）

我已经安装了react-intl，但每次我在google上搜索指南时，我都发现了许多无法解决的问题。

我想要的是在我的组件中使用经典<FormattedMessage id="myid" >。消息存储在名为'./locales/en.json'或'./locales/en.js'。

的SEPARATE文件中

在我的app.js中使用

import {addLocaleData, IntlProvider} from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';

addLocaleData(enLocaleData);

我用过：

<IntlProvider locale='en' messages="i-dont-know-what-insert-here">
  <Index />
</IntlProvider>

我已经尝试了很多解决方案。

第一种方法： en.json是这样构建的：

{
  "base.user":"Username"
  [...]
}

第二种方法： en.js是这样构建的：

export const ENGLISH = {
    lang: 'en',
    messages: {
        "base.user":"Username"
      [...]
    }
}

这些是我在谷歌上发现的例子，但我不知道如何在应用程序中使用这些文件。

下一步，我必须允许用户按标志按钮更改语言，但是现在，我很高兴看到翻译文件正常工作。

感谢。

Answer 1

我找到了解决方案，所以我会在这里发帖给别人。

第一：我已经使用了lang.js文件的第二种方法。所以你有：

export const ENGLISH = {
    lang: 'en',
    messages: {
        "base.user":"Username"
      [...]
    }
}

在您的app.js或您使用IntlProvider的root.js中，包含以下文件：

import { ENGLISH } from './locales/en';

在你的app.js（或你的根js）中使用：

class App extends Component {

  constructor(props)
  {
    super(props);

    this.state = {
        locale : 'en',
        messages : ENGLISH.messages
    }

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

然后：

<IntlProvider locale={this.state.locale} messages={this.state.messages}>
    <Index changeLanguage = {this.changeLanguage} />
</IntlProvider>

您可以看到changeLanguage。这是我在上面发布的第二个问题。这是changeLanguage方法：

changeLanguage(lang)
  {
    switch(lang)
    {
      case "it": this.setState({local:lang}); this.setState({messages:ITALIAN.messages}); break;
      default: this.setState({locale:'en'}); this.setState({messages:ENGLISH.messages}); break;
    }
  }

将方法传递给Index组件，允许它使用某种事件更改语言。

在你的子Component（在我的例子中为Index）中，你必须定义一个映射在father方法上的changeLanguage方法：

changeLanguage = (lang) => {
        this.props.changeLanguage(lang);
    }

最后，如果你有一个标志按钮（或其他东西），你可以使用：

onClick={ () => this.changeLanguage('it') }

React将自动重新加载组件，以便每次

<FormattedMessage ...

你有，将被翻译为dinamically

React - 使用外部翻译文件的intl

1 个答案: