Meteor React教程第2步不起作用

时间:2017-10-02 14:23:12

标签: meteor meteor-react

我正在做Meteor React simple-todos教程。 第一步是创建应用程序,cd进入app目录并运行meteor。到目前为止一切都很好。

我按照步骤2中的说明进行了更改,但未显示待办事项列表。我得到一个空白的屏幕。

代码与https://www.meteor.com/tutorials/react/components上的代码完全相同 浏览器或控制台中不会显示任何错误消息。

版本:Meteor 1.5.2.1,OS = Ubuntu 16.04 LTS

3 个答案:

答案 0 :(得分:9)

尝试删除Blaze

meteor remove blaze-html-templates

并添加static-html

meteor add static-html

在此之前,请确保文件中没有错字。您可以从这些文件中复制代码。不用担心这些代码仅用于步骤2。

client/main.html

client/main.js

imports/ui/App.js

imports/ui/Task.js

如果这不起作用,您可以始终使用命令add而不是remove来还原blaze并删除static-html

答案 1 :(得分:4)

找到答案。解决方案是按如下方式更改Task.jsx:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Task extends Component {
  render() {
      return (
          <li>{this.props.task.text}</li>
      );
  }
}

Task.propTypes = {
    task: PropTypes.object.isRequired,
};

这是在github页面meteor / simple-todos-react上给出的。链接是 https://github.com/meteor/simple-todos-react/commit/ef2c0f0e13af648e784f0c96fe573d923009f919

答案 2 :(得分:1)

今晚花了几个小时。这是我最终解决该问题的方法

  1. 我删除了烈火meteor remove blaze-html-templates
  2. 添加静态html meteor add static-html。不这样做会导致Uncaught Error: Target container is not a DOM element.
  3. 更改Task.jsx使其变为App.js并将import语句更改为import Task from './Task.jsx';

Task.jsx

的内容
import PropTypes from 'prop-types';
import React, { Component } from 'react';

export default class Task extends Component {
 render() {
   return (
     <li>{this.props.task.text}</li>
   );
 }
}

Task.propTypes = {
    task: PropTypes.object.isRequired,
};

查看其他讨论here