Question

我们希望将主站点的后台作为我们用户的多语言解决方案。我们已经决定使用React + Redux，因为将已经部署的API用于授权和数据提取等几个功能是很有意义的。

我过去使用过自定义方法，但它太复杂了，也许我们在这里缺少best practices方法。主站点已经有4种语言，很快就会成长为其他语言。

我已经看了一些正在进行的库，例如React-intl（https://github.com/yahoo/react-intl）和Airbnb Polyglot（http://airbnb.io/polyglot.js/）

在React中构建多语言网站的最佳方法/ lib /解决方案是什么？（只是在前端，而不是同构的应用程序）

Answer 1

您可以使用redux-polyglot在React / Redux应用程序中轻松使用Airbnb的Polyglot。（注意：我是其中一位作者）

它提供：

用于存储语言和相应消息的reducer。您可以通过以下两种方式提供：
- 一个中间件，您可以配置该中间件以捕获特定操作，扣除当前语言并获取/获取相关消息。
- 直接发送setLanguage(lang, messages)
一个getP(state)选择器，用于检索公开4种方法的P对象：
- t(key)：原始多语言T函数
- tc(key)：大写翻译
- tu(key)：大写翻译
- tm(morphism)(key)：自定义变换翻译
getLocale(state)选择器以获取当前语言
一个translate高阶组件，通过在props中注入p对象来增强您的React组件

简单用法示例：

发送新语言：

import setLanguage from 'redux-polyglot/setLanguage';

store.dispatch(setLanguage('en', {
    common: { hello_world: 'Hello world' } } }
}));

组件中的

：

import React, { PropTypes } from 'react';
import translate from 'redux-polyglot/translate';

const MyComponent = props => (
  <div className='someId'>
    {props.p.t('common.hello_world')}
  </div>
);
MyComponent.propTypes = {
  p: PropTypes.shape({t: PropTypes.func.isRequired}).isRequired,
}
export default translate(MyComponent);

如果您有任何问题/建议，请告诉我！

Answer 2

React-Intl和Polyglot是两个最受欢迎的I18n库，根据我对两个库的经验，我更喜欢Polyglot的简单解决方案而不是React-Intl方法。 Polyglot很简单，但具有插值和复数的全部功能，并且Airbnb测试了缩放。

创建了许多库以便在Polyglot应用程序中使用React，polyglot-react就是其中之一（我是作者）。这是一个非常简单的高阶组件，它将多语言实例作为prop传递给子组件。

使用很简单，有两个步骤：

将根组件包装在Provider组件

import { Provider } from 'polyglot-react';
import App from './components/App';

const locale = "en";
const phrases = {
  "home.login": "Login",
  "home.signup": "Sign Up"
}

export default () => (
  <Provider locale={locale} phrases={phrases}>
    <App />
  </Provider>
);

装饰子组件

import React, { Component } from 'react';
import { withPolyglot } from 'polyglot-react';

class TodoList extends Component {
  render() {
    const { polyglot } = this.props;
    return (
      <div>
        <h1>{ polyglot.t("list.title") }</h1>
        <ul>
          {this.state.todos.map( todo => <Todo {...todo} /> )}
        </ul>
      </div>  
    );
  }
}

TodoList = withPolyglot()(TodoList);
export default TodoList;

此解决方案适用于客户端和服务器端Javascript应用程序。

Answer 3

我正在基于Mozilla创建的新Fluent API进行开发的项目。这是一种非常简单但功能强大的I18n方法。加上它具有JavaScript实现以及React Bindings（以及其他实现），包括非常清晰的用法示例。它与平台无关，可用于后端或客户端。

随时检查：

流利的主页-https://projectfluent.org/
Fluent游乐场（Fluent的工作原理）-https://projectfluent.org/play/
GitHub存储库-https://github.com/projectfluent
JavaScript实现-https://github.com/projectfluent/fluent.js
反应绑定-https://github.com/projectfluent/fluent.js/tree/master/fluent-react

多语言反应webapp的最佳方法

3 个答案:

它提供：

简单用法示例：

发送新语言：

：