首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Meteor + Blaze + React中使用createContainer()的正确方法是什么?

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

Stack Overflow用户
提问于 2017-01-05 17:40:00
回答 1查看 241关注 0票数 0

我有一个工作部件,我正在做这个:

代码语言:javascript
运行
复制
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';

我用烈火包装反应部件,如下所示:

代码语言:javascript
运行
复制
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。

我现在有了一个测试工具,使用Meteorv1.4.2.3、MeteorNPMv3.10.9和MeteorNodev4.6.2,这些工具已经停止工作。毫不奇怪,在我的服务器控制台中:

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

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

我试过的是:

first将组件和create容器保存在同一个文件中,我做了正确的ES6导出:

代码语言:javascript
运行
复制
const Foo = class Foo extends Component {

const FooContainer = createContainer(() => {

export {Foo, FooContainer};

..。还有进口的福。

结果:Foo加载在应用程序中,但容器代码从未运行。

第二个,我将组件和create容器放在两个不同的文件中,然后恢复到导出默认值:

代码语言:javascript
运行
复制
// Foo.jsx    
export default class Foo extends Component {

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

..。并使用Foo:

代码语言:javascript
运行
复制
import Foo from '/imports/ui/components/Foo';

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

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

结果:Foo加载在应用程序中,但容器代码从未运行。

third,类似于上面的内容,但是我尝试将FooContainer放在页面上:

代码语言:javascript
运行
复制
import FooContainer from '/imports/ui/components/FooContainer';

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

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

结果:来自React的大错误消息,基本上我做得不对。

有什么合适的办法让这件事成功吗?

最新情况:

尝试4和5

把它们放回同一个班级,如下所示:

代码语言:javascript
运行
复制
export class Foo extends Component {

export default createContainer(() => {

..。有两种不同的导入方式:

代码语言:javascript
运行
复制
import Foo from '/imports/ui/components/Foo';

它运行了createContainer(),但没有将组件放在页面上。

代码语言:javascript
运行
复制
import {Foo} from '/imports/ui/components/Foo';

相反:没有运行createContainer(),但我确实看到了组件。

EN

Stack Overflow用户

回答已采纳

发布于 2017-01-05 19:41:42

在1个jsx文件中使其正常工作:

代码语言:javascript
运行
复制
export class Foo extends Component {

export default createContainer(() => {

在帮助程序中,依赖于默认导出:

代码语言:javascript
运行
复制
import Foo from '/imports/ui/components/Foo';

实际问题是,我错误地导入了要发布的服务器文件,这导致了连锁反应,导致组件不呈现。是啊。

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41491363

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档