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

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 节点 v4.6.2，但它已停止工作。毫不奇怪，在我的服务器控制台中：

While building for web.browser:
imports/ui/components/Foo.jsx:58: Only one default export allowed per module. (58:0)

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

我尝试过的：

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

const Foo = class Foo extends Component {

const FooContainer = createContainer(() => {

export {Foo, FooContainer};

...并导入 Foo.

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

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

// 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，但容器代码从未运行。

third，与上面类似，但我改为尝试将 FooContainer 放在页面上：

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

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

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

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

关于使它起作用的正确方法有什么想法吗？

更新：

尝试 4 和 5

将两者放回同一个 class，像这样：

export class Foo extends Component {

export default createContainer(() => {

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

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(() => {

在helper中，依赖默认导出：

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

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

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

what is the proper way to use createContainer() in Meteor + Blaze + React?

meteor

meteor-blaze

meteor-react