我们希望将主站点的后台作为用户的多语言解决方案。我们已经决定为此使用 React + Redux,因为将已经部署的 API 用于授权和数据获取等多种功能非常有意义。
我过去使用过自定义方法,但它太复杂了,也许我们在这里缺少最佳实践
方法。主站点已经支持 4 种语言,并且很快就会支持其他语言。
我查看了一些正在进行的库,例如 React-intl (https://github.com/yahoo/react-intl) 和 Airbnb Polyglot (http://airbnb.io/polyglot.js/)
在 React 中构建多语言站点的最佳方法/库/解决方案是什么? (只是在前端,而不是同构应用程序)
最佳答案
您可以使用 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 中注入(inject)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);
如果您有任何问题/建议,请告诉我!
关于javascript - 多语言 react webapp 的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38179286/