Meteor React 教程第 2 步无效

Question

我正在做 Meteor React simple-todos 教程。第一步只是创建应用程序，cd 进入应用程序目录和运行 meteor。到目前为止一切顺利。

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

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

版本：Meteor 1.5.2.1，OS = Ubuntu 16.04 LTS

Answer 1

找到答案了。解决方法是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 上给出。 Link 是 https://github.com/meteor/simple-todos-react/commit/ef2c0f0e13af648e784f0c96fe573d923009f919

Answer 2

尝试删除 Blaze

meteor remove blaze-html-templates

并添加static-html

meteor add static-html

在此之前，请确保您的文件中没有拼写错误。您可以从这些文件中复制代码。别担心，这些代码仅用于第 2 步。

如果这不起作用，您可以随时使用命令 add 而不是 remove 来恢复 blaze 并删除 static-html.

Answer 3

今晚为此花了几个小时。这是我最终修复它的方法

我移除了火焰 meteor remove blaze-html-templates
添加静态 html meteor add static-html。不这样做会导致 Uncaught Error: Target container is not a DOM element.
更改 Task.jsx 使其变为 App.js 中的导入语句更改为 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

Meteor React 教程第 2 步无效

Meteor React Tutorial Step 2 did not work

meteor

meteor-react