2016-04-12 13 views
1

Meter + Reactで条件付きレンダリングを試行しています。レンダリングメインにMeteor + Reactの条件付きレンダリング

renderInputForm() { 
if (Tokens.find().count()) return; 
return (<TokenForm />); 
} 

と{this.renderInputFormを()}置く:私は唯一のコンポーネントはアイテムの数は、収集===から0

を返された場合、私はこれを試してみました表示にしたいです()、しかしそれはそれを隠す前に分割秒間点滅します...

私はなぜフラッシュが起こっているのか知りません。

答えて

0

データの同期が完了するまで待つ必要があります。初期のMiniMongoコレクションは空であるため、フラッシュはそこにあります。 (また、あなたのレンダリング機能でCollection.find()を避けたいかもしれません。)

と仮定すると、あなたが流星1.3.xの使用:

export const MyComponent = createContainer(() => { 
    let subscription = Meteor.subscribe('something'); 
    if (!subscription.ready()) return {}; 
    return { 
    tokens: Tokens.find().fetch() 
    } 
}, InternalComponent); 

をしてから反応させ、コンポーネント内props.tokensの存在を確認します。

class InternalComponent extends React.Component { 
    render() { 
    if (!this.props.tokens || this.props.tokens.length > 0) return; 
    return <TokenForm />; 
    } 
} 

ここにサブスクリプションの詳細をご覧ください:http://docs.meteor.com/#/full/meteor_subscribe

+0

は、同じファイルにこれらの二つのスニペットはありますか?現在render()には他のコードがあり、このInternalComponentを適切に使用する方法を決定しようとしています。 –

+0

これらは同じファイルに入れることができます。 'createContainer'はMeteor 1.2で' getMeteorData'が行ったことを行います。基本的には、InternalComponentにReactとバインドするためにいくつか追加します。それでも必要なコードをすべてInternalComponentに入れることができます。 – aedm