2017-01-05 10 views
0

私はこれをやっている作業のコンポーネントがあります。Meteor + Blaze + ReactでcreateContainer()を使用する適切な方法は何ですか?

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

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

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

私はやってはならないことを実現:私はこのように、反応させ、コンポーネントをラップするためにブレイズを使用しています

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

を1つのファイルに複数のデフォルトエクスポートがありますが、動作します。これはMeteor v1.4.1.1、Meteor npm v3.10.6、Meteor node v4.5.0のバージョンであることに注意してください。

私は今、流星v1.4.2.3、流星のNPM v3.10.9と、これは動作を停止しました流星ノードv4.6.2と、テストハーネスを持っています。驚くことではないが、私のサーバーコンソールで:

web.browserのために構築している間:
輸入/ UI /コンポーネント/ Foo.jsx:58:唯一のデフォルトのエクスポートは、モジュールごとに を許可します。 (58:0)

これで、私はこれを正しく動作させる方法を探しています。

私が試したもの:

const Foo = class Foo extends Component { 

const FooContainer = createContainer(() => { 

export {Foo, FooContainer}; 

...とはFooをインポート:コンポーネントを保ち、

最初と同じファイル内のコンテナを作成し、私は、エクスポート、適切ES6をしました。

結果:Fooがアプリに読み込まれましたが、コンテナコードが実行されませんでした。

、私はコンポーネントと2つの異なるファイルで作成した容器を入れ、およびエクスポートデフォルトに戻っ:

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

結果:基本的に私は右のそれをやっていなかったことをリアクトから大きなエラーメッセージを。

これを正しく動作させるにはどうすればよいですか?

更新:それをインポートの2種類の方法で...

export class Foo extends Component { 

export default createContainer(() => { 

試み4と5

はこのように、両方のバック同じクラスに入れ:

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

はcreateContainer()を実行しましたが、コンポーネントをページに配置しませんでした。

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

これは逆でした:createContainer()を実行しませんでしたが、コンポーネントが表示されました。

答えて

0

それが1つのJSXファイルで、働いて得た:デフォルトの輸出に頼って、ヘルパーで

export class Foo extends Component { 

export default createContainer(() => { 

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

実際の問題は、私が間違って公開するサーバーのファイルをインポートしていましたそれが原因で連鎖反応が起こり、成分が生成されなかった。 doh。

関連する問題