javascript - Meteor - createContainer 未渲染到 React

Question

我正在尝试动态地从 mongo 数据库检索数据，就像当有人向数据库插入某些内容时，它会在客户端自动更新它。首先，我在客户端文件夹中的 main.js 上使用了 Tracker.autorun，它可以工作。当运行“ReactDOM.render”时，我将一个 prop 传递到根组件中并进行渲染。但是，当我添加路由时，我不再传递组件，而是传递整个路由。所以我尝试在组件文件上运行它，但它不起作用。所以我尝试使用 createContainer，我按照 Meteor 网站上的文档进行操作，但我收到的数据是“Uncaught ReferenceError:props 未定义”错误。请帮助我找出我做错了什么。预先感谢您。

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 类并使用react 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);