多语言反应webapp的最佳方法 _Webapp

少年意气强不羁，虎胁插翼白日飞。这篇文章主要讲述多语言反应webapp的最佳方法相关的知识，希望能为你提供帮助。
我们希望将主站点的后台作为我们用户的多语言解决方案。我们已经决定使用React + Redux，因为将已部署的API用于授权和数据获取等多种功能非常有意义。
我过去使用过自定义方法，但它太复杂了，也许我们在这里缺少一个best practices方法。主站点已经有4种语言，很快就会成长为其他语言。
我已经看了一些正在进行的库，例如React-intl（https://github.com/yahoo/react-intl）和Airbnb Polyglot（http://airbnb.io/polyglot.js/）
在React中构建多语言网站的最佳方法/ lib /解决方案是什么？（只是在前端，而不是同构的应用程序）
答案您可以使用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)selector
一个translate高阶组件，通过在道具中注入p对象来增强你的React组件

简单用法示例：dispatch new language :

import setLanguage from 'redux-polyglot/setLanguage'; store.dispatch(setLanguage('en', { common: { hello_world: 'Hello world' } } } }));

in component :

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

如果您有任何问题/建议，请告诉我！
另一答案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;

【多语言反应webapp的最佳方法】此解决方案适用于客户端和服务器端javascript应用程序。