流星に表示されていないユーザーのアバターが反応します

Question

私は新しい流星反応アプリのプロトタイプを作成しています。画像はS3に保存されます。彼らはURLでアクセスできます。まだサブスクリプションが追加されていないため、自動公開はまだ削除されていません。チュートリアルで提案されているようにReactに反応動作を追加するには、react-addons-pure-render-mixinとreact-meteor-dataがプロジェクトに追加されます。私はそのuser.profileが即座に利用できない、理解し、そのチェックがあります：

avatarUrl(){ 
    var user = Meteor.user(); 
    return (user&&user.profile?Meteor.user().profile.avatar:"/no-thumb2.jpg"); 
} 

私のページでは、私は次のコードを持っている：

render() { 
    return (
     <div className="container"> 
      <header> 
       <h1>...</h1> 
      </header> 

      <Image ref="ava" src={this.avatarUrl()} height="171" width="180" circle title="..." /> 

をしかし、結果には、画像no-thumb2.jpg親指ではありません。

Answer 1

反応性のあるデータをreact-meteor-dataから利用するには、コンポーネントをコンテナコンポーネントでラップする必要があります。それはこのような何かを見ることができる、のは、あなたのコンポーネントがAppと呼ばれているとしましょう：

import { Meteor } from 'meteor/meteor'; 
import { createContainer } from 'meteor/react-meteor-data'; 

class App extends React.Component { 
    render() { 
    return(
     <Image ref="ava" src={this.props.avatar} height="171" width="180" circle title="..." /> 
    ) 
    } 
} 

// CONTAINER that wraps App 
export default AppContainer = createContainer(({}) => { 
    const user = Meteor.user(); 
    const avatar = (user&&user.profile?Meteor.user().profile.avatar:"/no-thumb2.jpg"); 

    return { 
    avatar 
    } 
}, App); 

あなたは、代わりにAppのAppContainerを使用しています。それは積極的にあなたのアバターを更新する必要があります。このアプローチの詳細については、hereをご覧ください。また、匿名のコンテナを使用することもできますが、私はこのアプローチが好きです。