响应更新intl不工作:未登录ReferenceError:未能找到Intl消息：

Question

我确实升级了从反应0.13到最新的。这里是我更改的依赖项列表。

react: 0.13.3 -> 0.14.3  
react-dom: none  -> 0.14.3  
react-router: 0.13.3 -> 1.0.3  
react-history: none -> 1.0.3  
react-intl: 1.2.0 -> 1.2.2  
intl: 1.0.0 -> 1.0.1  

但我不能再让翻译工作了。

Uncaught :未能找到Intl消息: test

// app.js
var React = require('react');
var ReactDom = require('react-dom');
var Router = require('react-router').Router;
var routes = require('./routes');
var createHistory = require('history').createHistory;

var intlData = {
    locales: 'en',
    messages: {
        test: 'Test'
    }
};

ReactDom.render(<Router history={createHistory()} intl={intlData}>{routes}</Router>, document.getElementById('app'));


// Test.js
var React = require('react');
var ReactIntl = require('react-intl');
var IntlMixin = ReactIntl.IntlMixin;

var Test = React.createClass({

    mixins: [IntlMixin],

    render: function() {
        return (
            <div>
                <h1>
                    {this.getIntlMessage('test')}
                </h1>
            </div>
        );
    }
});

module.exports = Test;

我在更新中错过了什么？什么是正确的方式来插入我的信息。

Answer 1

IntlMixin由从上下文上看为相关数据工作，特别是this.context.formats和this.context.messages。可能是React路由器从0.x升级到1.x --这改变了顶级组件的处理方式--打破了这种局面。

但是，如果您查看上面链接的源，您可以看到，只有在this.context上找不到数据时，mixin才会查找它。因此，如果您可以将国际化数据作为支柱传递给每个路由处理程序，那么一切都会进行得很好。幸运的是，React路由器允许您只执行该createElement。

createElement应该是一个带有两个参数的函数:组件React路由器想要呈现，以及它想要发送的道具。该函数应该使用给定的支持来呈现该组件。默认实现如下所示：

function createElement(Component, props) {
  return <Component {...props} />
}

但是，您可以进一步自定义组件的呈现方式。就你的情况而言，它可能看起来像：

function createIntlElement(Component, props) {
  return <Component intl={intlData} {...props} />
}

虽然从React文档中可以看出，道具应该被拆分，但是如果不起作用，也许更像：

function createIntlElement(Component, props) {
  return <Component {...props}
                    locales={intlData.locales}
                    messages={intlData.messages} />
}

或者，更简单地使用扩展语法，

function createIntlElement(Component, props) {
  return <Component {...props} {...intlData} />
}

然后，通过将createElement函数传递给createElement支柱，指示路由器使用它：

var router = (
  <Router history={createHistory()} createElement={createIntlElement}>
    {routes}
  </Router>
);
ReactDom.render(router, document.getElementById('app'));

不要忘记在所有路由处理程序中包括IntlMixin，这样没有由路由器直接呈现的子组件仍然可以访问上下文。

React 2(现在处于beta版)似乎使用IntlProvider组件，就像Redux的Provider组件一样，为您提供正确的上下文，因此在使用该版本时不需要使用createElement。