Question

我有一个工作组件，我这样做：

import React, {Component, PropTypes} from 'react';
import {createContainer} from 'meteor/react-meteor-data';

export default class Foo extends Component {
}

export default createContainer(() => {
}, Foo);

import Foo from '/imports/ui/components/Foo';

我正在使用Blaze来包装React组件，如下所示：

import Foo from '/imports/ui/components/Foo';

Template.registerHelper("Foo", function() {
    return Foo;
);

<div>
    {{> React component=Foo}}
</div>

我意识到我不应该在一个文件中进行多个默认导出，但它确实有效。请注意，这是以下版本：Meteor v1.4.1.1，Meteor npm v3.10.6，Meteor node v4.5.0。

我现在有一个测试工具，Meteor v1.4.2.3，Meteor npm v3.10.9和Meteor node v4.6.2，这已停止工作。毫不奇怪，在我的服务器控制台中：

为web.browser构建时：
imports / ui / components / Foo.jsx：58：只允许一个默认导出每个模块。（58：0）

所以现在我正在寻找一种让它恢复正常工作的方法。

我尝试过的事情：

首先，将组件和创建容器保存在同一个文件中，我做了正确的ES6导出：

const Foo = class Foo extends Component {

const FooContainer = createContainer(() => {

export {Foo, FooContainer};

...并导入了Foo。

结果：在应用中加载了Foo，但容器代码从未运行过。

第二次，我将组件和创建容器放在两个不同的文件中，并恢复为导出默认值：

// Foo.jsx    
export default class Foo extends Component {

// FooContainer.jsx
export default createContainer(() => {

......并使用了Foo：

import Foo from '/imports/ui/components/Foo';

Template.registerHelper("Foo", function() {
    return Foo;
});

<div>
    {{> React component=Foo}}
</div>

结果：在应用中加载了Foo，但容器代码从未运行过。

第三次，与上述类似，但我尝试将FooContainer放在页面上：

import FooContainer from '/imports/ui/components/FooContainer';

Template.registerHelper("Foo", function() {
    return FooContainer;
});

<div>
    {{> React component=Foo}}
</div>

结果：来自React的大错误消息，基本上我没有做对。

有关正确方法的任何想法吗？

更新

尝试4和5

将两者放回同一类，如下所示：

export class Foo extends Component {

export default createContainer(() => {

...有两种不同的导入方式：

import Foo from '/imports/ui/components/Foo';

运行createContainer（）但没有将我的组件放在页面上。

import {Foo} from '/imports/ui/components/Foo';

做了相反的事情：没有运行createContainer（），但我确实看到了组件。

Answer 1

让它工作，在1个jsx文件中：

export class Foo extends Component {

export default createContainer(() => {

在帮助器中，依赖于默认导出：

import Foo from '/imports/ui/components/Foo';

实际问题是我错误地导入了要发布的服务器文件，这导致链式反应导致组件无法呈现。 DOH。

在Meteor + Blaze + React中使用createContainer（）的正确方法是什么？

1 个答案: