多语言反应 webapp 的最佳方法

Question

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

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

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

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

原文由 elQueFaltaba 发布，翻译遵循 CC BY-SA 4.0 许可协议

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) ：自定义变形翻译
• a getLocale(state) 获取当前语言的选择器
• 一个 translate 高阶组件，通过在道具中注入 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);

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

原文由 Jalil 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

React-Intl and Polyglot are two most popular I18n libraries, according to my experiences with both of the libraries I prefer the simple solution of Polyglot 比 React-Intl 方法。 Polyglot 很简单，但具有插值和复数的完整功能，缩放由 Airbnb 测试。

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

用法很简单，只需两步：

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>
);

1. 装饰子组件

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

原文由 Ho Duc Ha 发布，翻译遵循 CC BY-SA 3.0 许可协议