Аватара пользователя не отображается в meteor react

Question

Я создаю прототип нового приложения Meteor-React. Изображения сохраняются в 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); 

Вы затем использовать AppContainer вместо App. Это должно реактивно обновить ваш аватар. Вы можете узнать больше об этом подходе here. Также вы можете использовать анонимные контейнеры, но мне нравится этот подход, поскольку он более ясен.