React/Meteorアプリケーションでユーザーデータを表示

Question

Reactテンプレート内のMeteorフェッチからデータを表示するためのさまざまな方法を試してきました。なぜこれが難しいのか、私は完全に理解していません。

それは{this.data.user._id}

getMeteorData() { 
    return { 
     user: Meteor.user() 
    }; 
    }, 

を使用する場合componentDidMountを使用する場合は、同じ物語であるデータを表示しないテンプレート内getMeteorDataを使用します。

私は流星のウェブサイトで流星のチュートリアル&に従って、彼らは小道具を使用しています。しかし、これは単にデータを取得して取得するための多くの作業を感じています。

これは、あなたがgetMeteorData()仕事をするためにReactMeteorDataミックスインを使用する必要が試み

export var MenuLoggedIn = React.createClass({ 
    displayName: 'MenuLoggedIn', 
    mixins: [ 
    Router.State, Router.Navigation 
    ], 
    getMeteorData() { 
    return { 
     user: Meteor.user() 
    }; 
    }, 
    getInitialState(){ 
    return { 
     avatarImagePreview: null, 
     avatarImage: null 
    }; 
    }, 

    render: function() { 
    return (
     <div className="container"> 
     <div className="menu-structure col-md-12"> 

      {this.data.user._id} 

      <div className="left-menu pull-left"> 
      <img className="logo" src="/img/logo.png"/> 
      <h1 className="eventburger-title">eventburger</h1> 
      </div> 
      <div className="right-menu"> 
      <div className="search-bar"> 
       <i className="fa fa-search"></i> 
       <input type="text" name="Search" placeholder="Harpist, Photographer, Caterer..."/> 
      </div> 

      {this.data 
       ? <img src="/img/avatar.png"/> 
       : <img src="/img/placeholder-person.jpg"/>} 

      <span>{this.data} 
       Feeney</span> 

      <a href="/app/inbox"> 
       <i className="fa fa-envelope"></i> 
      </a> 
      <a className="head-spacing" href="#" onClick={this.logout}>LOG OUT</a> 
      </div> 
     </div> 
     </div> 
    ); 
    }, 
    logout: function(e) { 
    e.preventDefault(); 
    Meteor.logout(); 
    window.location.href = "/login"; //Need to be moved to History 
    } 
}); 

Answer 1

の一例です。

mixins: [ 
    Router.State, Router.Navigation, ReactMeteorData 
], 

https://atmospherejs.com/meteor/react-meteor-data