1

嗨，我是新手，现在我使用 react-boilerplate 开发了前端。我正在尝试向我的应用程序添加新语言。我遵循这个文档：i18n docs to generate (add) new language and extract all language..

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

问题 ：

  1. 这个反应样板如何检测语言环境？从浏览器接受的语言/浏览器语言/客户端操作系统语言？
  2. 我如何即时更改反应样板语言环境？

请给予一些启示..提前非常感谢..

4

3 回答 3

2

您可以使用下面的代码获取浏览器的语言。请注意，此方法将返回用户在 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美国语言的格式，因此您必须重新格式化字符串或更改翻译文件夹中语言文件的名称。希望这能回答你的问题。

于 2018-12-04T17:12:32.960 回答
0

这是我对你的问题的回答。

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

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

于 2017-11-21T03:28:57.083 回答
0

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

于 2017-11-24T07:12:21.810 回答