Meteor React.js 教程第 2 部分中的应用程序崩溃答案

【问题标题】：App crash in part 2 of Meteor React.js tutorialMeteor React.js 教程第 2 部分中的应用程序崩溃
【发布时间】：2015-10-14 06:38:23
【问题描述】：

我的应用在 Meteor React.js tutorial 中崩溃（如下）。我似乎找不到问题，代码完全来自教程。救命！

Desktop/simple-todos-react/.meteor/local/build/programs/server/app/simple-todos-react.js:14
    React.render(<App />, document.getElementById("render-target"));   // 6
                 ^
SyntaxError: Unexpected token <
    at Desktop/simple-todos-react/.meteor/local/build/programs/server/boot.js:241:30
    at Array.forEach (native)
    at Function._.each._.forEach (/.meteor/packages/meteor-tool/.1.1.9.1u3q681++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
    at /Desktop/simple-todos-react/.meteor/local/build/programs/server/boot.js:137:5
Exited with code: 8
Your application is crashing. Waiting for file change.

simple-todos-react.html

<head>
  <title>Todo List</title>
</head>

<body>
  <div id="render-target"></div>
</body>

simple-todos-react.js

if (Meteor.isClient) {
  // This code is executed on the client only

  Meteor.startup(function () {
    // Use Meteor.startup to render the component after the page is ready
    React.render(<App />, document.getElementById("render-target"));
  });
}

App.jsx

// App component - represents the whole app
App = React.createClass({
  getTasks() {
    return [
      { _id: 1, text: "This is task 1" },
      { _id: 2, text: "This is task 2" },
      { _id: 3, text: "This is task 3" },
      { _id: 4, text: "This is task 4" },
      { _id: 5, text: "This is task 5" }
    ];
  },

  renderTasks() {
    return this.getTasks().map((task) => {
      return <Task key={task._id} task={task} />;
    });
  },

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
});

Task.jsx

// Task component - represents a single todo item
Task = React.createClass({
  propTypes: {
    // This component gets the task to display through a React prop.
    // We can use propTypes to indicate it is required
    task: React.PropTypes.object.isRequired
  },
  render() {
    return (
      <li>{this.props.task.text}</li>
    );
  }
});

【问题讨论】：

很多时候前端框架会改变像'（我们用作单引号但实际上是脚符号）和“（我们用作双引号但实际上是英寸符号）这样的字符) 到他们的实际字符（开引号，闭引号）。我也遇到了 ' 变成 ` 的麻烦，虽然它很相似但不能互操作。那将是我要检查的第一个地方。
在显示错误的问题顶部，还包括以下行：React.render(, document.getElementById("render-target"));。这缺少函数的第一个参数。然后在 simple-todos-react.js 中包含第一个参数的行，如下所示：React.render(<App />, document.getElementById("render-target"));。这应该可以，但是如果您忽略了<App /> 参数，您将收到错误Unexpected token

标签： meteor reactjs

【解决方案1】：

哇，忘记在文件名末尾添加“x”了。应该是“simple-todos-react.jsx”。如果错误信息更清楚，会有所帮助。

【讨论】：