流星 - 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);