react-boilerplate i18n 更改语言环境答案

【问题标题】：react-boilerplate i18n change localereact-boilerplate i18n 更改语言环境
【发布时间】：2017-11-21 03:00:23
【问题描述】：

嗨，我是 react 新手，现在我使用 react-boilerplate 开发了前端。我正在尝试向我的应用程序添加新语言。我遵循此文档：i18n docs 生成（添加）新语言并提取所有语言..

但现在我很困惑如何测试它是否有效。我可以将 DEFAULT_LOCALE (\app\containers\App\constants.js) 值更改为我想要测试的语言说明符，它会起作用. 但我希望通过在客户端设置语言环境来测试它，然后 react-boilerplate 将检测它应该显示哪个语言环境。

问题：

这个反应样板如何检测语言环境？来自浏览器接受的语言/浏览器语言/客户端操作系统语言？
如何即时更改 react-boilerplate 语言环境？

请多多指教..提前多谢..

【问题讨论】：

标签： reactjs internationalization react-intl react-boilerplate

【解决方案1】：

您可以使用以下代码获取浏览器的语言。请注意，此方法将返回用户在 Chrome 中的“首选语言”，而不是 Chrome 的显示语言。它仍然大部分是准确的。

var userLang = navigator.language || navigator.userLanguage;

在containers/LanguageProvider/actions.js 中，您可以在应用程序的任何位置调度提供的changeLocale 动作创建者，以动态更改语言。

至于将检测到的语言环境设置为默认值，您可以如下修改LanguageProvider 容器：

...other imports
import {changeLocale} from './actions';

export class LanguageProvider extends React.PureComponent {
  componentDidMount() {
    this.props.changeLocale(navigator.language || navigator.userLanguage);

  }
  // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <IntlProvider
        locale={this.props.locale}
        key={this.props.locale}
        messages={this.props.messages[this.props.locale]}
      >
        {React.Children.only(this.props.children)}
      </IntlProvider>
    );
  }
}

LanguageProvider.propTypes = {
  locale: PropTypes.string,
  messages: PropTypes.object,
  children: PropTypes.element.isRequired,
};

const mapStateToProps = createSelector(makeSelectLocale(), locale => ({
  locale,
}));

function mapDispatchToProps(dispatch) {
  return {
    changeLocale: (lang) => dispatch(changeLocale(lang)),
  };
}
... other code

请注意，如果是美国语言，这会将语言环境设置为 en-US 的格式，因此您必须重新格式化字符串或更改翻译文件夹中语言文件的名称。希望这能回答您的问题。

【讨论】：

这对您有帮助，谢谢。您可以将该行添加到 propTypes：changeLocale: PropTypes.func.isRequired,

【解决方案2】：

这是我对您问题的回答。

1) 取决于浏览器的默认语言。

2) 我认为没有什么特别的方法。尝试根据您的喜好选择一种语言。

【讨论】：

嗨 Hiroto，感谢您的及时回复。默认情况下，我的 chrome 浏览器语言是英语，我已通过使用 CLI 生成新语言来添加新语言。我加上印度尼西亚。我添加了印度尼西亚语的翻译。然后我将浏览器默认语言更改为印度尼西亚并重新启动浏览器。我的反应应用程序中显示的语言仍然是英语。如果我将 DEFAULT_LOCALE 更改/硬编码为“id”（不带引号），将显示正确的结果。

【解决方案3】：

我复制了 react-boilerplate 更改语言环境功能，只是认识到演示版本已经包含该功能。据我所知，它没有检查浏览器或客户端操作系统语言，但它使用默认显示语言的 DEFAULT_LOCALE 设置。

【讨论】：