Reactjs 反应更新intl不工作：未捕获引用错误：找不到intl消息：

我确实从react 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  

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

未捕获引用错误：找不到Intl消息：test

//app.js
var React=要求（'React'）；
var ReactDom=require（'react-dom'）；
var-Router=require（'react-Router'）。路由器；
变量路由=需要（'./路由'）；
var createHistory=require（'history'）。createHistory；
变量intlData={
地区：'en'，
信息：{
测试：“测试”
}
};
render（{routes}，document.getElementById（'app'）；
//Test.js
var React=要求（'React'）；
var ReactIntl=require（'react-intl'）；
var IntlMixin=ReactIntl.IntlMixin；
var Test=React.createClass({
mixin:[IntlMixin]，
render:function（）{
返回(
{this.getIntlMessage（'test'）}
);
}
});
module.exports=测试；

---

我在更新中遗漏了什么？初始化我的消息的正确方法是什么。

IntlMixin

用于相关数据，特别是，和。可能是React路由器从0.x升级到1.x——这改变了顶级组件的处理方式——打破了局面

但是，如果您查看上面链接的源代码，您可以看到mixin仅在

this.props

上找不到数据时才在

this.context

上查找数据。因此，如果您可以将国际化数据作为道具传递给每个路由处理程序，那么一切都会顺利进行。幸运的是，React路由器允许您这样做

createElement

应该是一个接受两个参数的函数：路由器想要渲染的组件和它想要发送的道具。函数应使用给定的道具呈现该组件。默认实现如下所示：

函数createElement（组件、道具）{
返回
}

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

函数createIntlement（组件、道具）{
返回
}

虽然从React Intl文档中看起来应该拆分道具，但如果这不起作用，可能更像：

函数createIntlement（组件、道具）{
返回
}

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

函数createIntlement（组件、道具）{
返回
}

然后，将

createElement

函数传递给

createElement

道具，指示路由器使用该函数：

var路由器=(
{routes}
);
render（router、document.getElementById（'app'）；

不要忘记在所有路由处理程序中包含

IntlMixin

，这样，路由器未直接呈现的子组件仍然可以访问上下文

---

---

React Intl第2版（现在是beta版）似乎使用了

IntlProvider

组件，很像Redux的

提供者

组件，为您提供正确的上下文，因此，在使用该版本时，不需要使用

createElement

。

现在尝试更新到v2，在返回我的根组件时添加IntlProvider，并将intlmessage更改为object语法，但现在出现以下错误：

未捕获错误：不变冲突：对象作为子对象无效（找到：具有键{id}的对象）。如果要呈现子对象的集合，请改用数组或使用createFragment（对象）包装对象从React加载项。检查

App

@AlexanderSchranz的呈现方法请记住，v2仍处于测试阶段；实现中可能仍存在错误。此外，升级到v2还需要经过相当广泛的过程。无论哪种方式，这里都没有足够的信息来调试该特定问题。下面是我目前使用的完整代码可以通过用组件替换我的翻译来解决问题。我认为getIntlMessage的升级指南中缺少了一些东西。对我来说，对象的语法更改似乎不是正确的事情。谢谢你的帮助！

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