流星 - createcontainer沒有渲染到React

Question

我試圖從mongo數據庫中動態地檢索數據，就像有人在數據庫中插入某些東西時，它會自動在客戶端更新它。首先，我在客戶端文件夾的main.js上使用了Tracker.autorun，並且它工作正常。當運行「ReactDOM.render」並渲染時，我將一個道具傳遞給根組件。但是，當我添加路由時，我不再傳遞一個組件，我正在傳遞整個路由。所以我試着在組件文件上運行它，它不起作用。所以我嘗試使用createContainer，我遵循流星網站上的文檔，但我得到的數據「Uncaught ReferenceError：props is not defined」錯誤。請幫我看看我做錯了什麼。先謝謝你。

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { Link } from 'react-router'; 
import { Meteor } from 'meteor/meteor'; 
import { Tracker } from 'meteor/tracker'; 
import { createContainer } from 'meteor/react-meteor-data' 

import { Temp } from './../api/temp'; 

import Navigation from './Navigation'; 
import Readings from './Readings'; 


// Tracker.autorun(function() { 
// console.log(Temp.find().fetch()); 
// }); 

export class App extends React.Component { 

render() { 
return (
      <div> 
      <Navigation/> 
      <h1>HomePage</h1> 
      <Readings temp={props.getData}/> 
      </div> 
     ); 
    } 
    } 

export default createContainer(() => { 
    Meteor.subscribe('temp'); 
    return { 
     getData: Temp.find().fetch() 
    }; 
}, App); 

Answer 1

props沒有定義，因爲它生活在類的實例，與this.props訪問。您可以閱讀es6課程並對here作出反應。

但是，您會發現組件呈現時，您的訂閱尚未準備就緒。因此，使用訂閱句柄來測試它是否準備就緒，並在此期間顯示加載器。

export class App extends React.Component { 
    render() { 
    const {ready, getData} = this.props; 
    if (!ready) return (<div>loading...</div>); 
    return (
     <div> 
     <Navigation/> 
     <h1>HomePage</h1> 
     <Readings temp={getData}/> 
     </div> 
    ); 
    } 
} 

export default createContainer(() => { 
    const handle = Meteor.subscribe('temp'); 
    return { 
     ready: handle.ready(), 
     getData: Temp.find().fetch() 
    }; 
}, App);