多语言反应webapp的最佳方法

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)选择器,用于检索P公开4个方法的对象:
  • t(key):原始多语言T功能
  • tc(key):大写翻译
  • tu(key):大写翻译
  • tm(morphism)(key):自定义变形翻译
• getLocale(state)获取当前语言的选择器
• 一个translate更高阶的组件,通过p在props中注入对象来增强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 传递给子组件。

使用方法很简单，只需 2 个步骤：

1. 将根组件包裹在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>
);

2. 装饰子组件

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 应用程序。