Question

我们决定在react.js中进行本地化，肯定有办法进行本地化，但您的建议是什么？

我尝试了yahoo的react-intl，但无济于事：

var ReactIntl = require('react-intl') // we did npm install react-intl
// somewhere in the react component
render: function() {
    return (<div><ReactIntl.Number>{600}</ReactIntl.Number></div>);
}

给出错误：无法读取未定义的属性'_mockedReactClassConstructor'

花了几个小时试着解决这个错误，仍然无法解决 - ＆gt;放弃

我试过mozilla的l20n，但不确定它是否适用于react.js

想知道您对react.js本地化的建议是什么，谢谢！

Answer 1

回答我的问题。我们决定不使用yahoo的react-intl而是使用i18next。考虑使用更稳定和更受欢迎的产品非常重要。

你可以做的是在页面的根目录初始化i18next，然后通过道具传递它。在初始化i18next之前，请使用状态来阻止页面呈现。

Answer 2

现在有反应-i18next https://github.com/i18next/react-i18next适用于i18next＆gt; = 2.0.0

Answer 3

从现在起几个月。也许还有更多的本地化模块。但是如果你想做一些简单的事情并绕过使用这么多的模块（我们只使用必要的模块来减轻负载），这就是设置：

假设我们有一个根页面和登录页面（在我们的路由器设置中，事情基于根页面）

<强>根

有一个名为i18n（在getInitialState中）的状态
检测您的语言并初始化i18n
将对象设置为i18n state
在render（）中使用类似这样的东西

render: function() {
    var route;
    if (this.state.configLoaded && this.state.i18n) {
        route = (
            <RouteHandler i18n={this.state.i18n} onLanguageChange={this._languageChangedHandler} />
        );
    }
    return (
        <div>
            <Loading />
            {route}
        </div>
    );
}

你通过道具传递i18n。或者如果你愿意，使用mixins。

<强>登录

this.props.i18n.t('...')

Answer 4

我想也许可以使用React-Intl中的FormattedNumber来实现你的目的需要考虑的事项是，如果您使用仅提供翻译的i18next，而不是时间/日期/货币等，您将需要其他库，如Moment.js。 React-Intl为您提供了一切。注意IE＆lt; 9，你必须拥有Intl.js polyfill或polyfill服务（https://cdn.polyfill.io/v2/docs/）。我发现webpack加载这个polyfill是有问题的。

最后，使用React-Router最新版本，请参阅https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

你可能会发现有关RouteHandler的部分值得使用 {React.cloneElement（this.props.children，{someExtraProp：something}）} 将你的眼镜/消息传递给视图。

希望有所帮助

本地化的react.js建议和例子

4 个答案: