React - 带有外部翻译文件的 intl答案

【问题标题】：React - intl with external translation fileReact - 带有外部翻译文件的 intl
【发布时间】：2018-01-19 10:32:17
【问题描述】：

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

我已经安装了 react-intl 但每次我在谷歌上搜索指南时，我都会发现很多不起作用的解决方案。

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

在我的 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"
      [...]
    }
}

这些是我在 google 上找到的示例，但我不知道如何在应用程序中使用这些文件。

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

谢谢。

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

我找到了解决方案，所以我会在这里为其他人发帖。

首先：我对 lang.js 文件使用了第二种方法。所以你有：

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

在您使用 IntlProvider 的 app.js 或 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 组件，允许它使用某种事件更改语言。

在您的子组件（在我的情况下为索引）中，您必须定义映射到父方法的 changeLanguage 方法：

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

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

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

React 会自动重新加载组件，所以每个

<FormattedMessage ...

你有，将被动态翻译

【讨论】：