反应更新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 

但我无法再次获得翻译工作。

未捕获的ReferenceError：找不到国际消息：测试

// 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作品looking on the context的相关数据，具体而言，this.context.locales, this.context.formats和this.context.messages。这可能是React路由器从0.x升级到1.x - 这改变了顶级组件的处理方式 - 破坏了事情。

但是，如果你看一下上面链接的源代码，你可以看到，混入查找数据上this.context只有它不是this.props找到。因此，如果您可以将您的国际化数据作为道具传递给每个路线处理程序，那么情况就会正常。幸运的是，React Router允许你做到这一点via createElement。

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

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

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

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

尽管它看起来像是从阵营国际文档的道具，应拆出，因此，如果不工作，也许更像是：

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上的所有路线的处理器，这样子组件不路由器直接呈现仍然可以访问上下文。

---

阵营国际机场2版（测试版现在）出现使用IntlProvider组件，就像终极版的Provider组件，为您提供正确的上下文，因此使用createElement使用该版本时，不应该是必要的。