javascript - Facebook 的 react.js——对象不是函数

Question

继续 Facebook 的 read.js tutorial ，我得到这个错误:

Uncaught TypeError: Property 'CommentList' of object [object Object] is not a function

其实react.js自己的examples page有:

Uncaught TypeError: object is not a function

谁能解释一下正确的用法？

---

教程进度

导入以下两个javascripts:

http://fb.me/react-0.4.1.js http://fb.me/JSXTransformer-0.4.1.js

HTML 是一行:

  <div id="content"></div>

还有 javascript 或者更确切地说 <script type="text/jsx">看起来像这样:

var CommentBox = React.createClass({
    render: function() {
        return (
           <div class="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
        </div>
        );
    }
});


React.renderComponent(
    <CommentBox />,
    document.getElementById('content')
);


var CommentList = React.createClass({
    render: function() {
        return (
        <div class="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
        </div>
    );
    }
});

Answer 1

这里有两个主要问题。

首先，当 React.renderComponent 被调用时， CommentList 还没有被分配，因此仍然是未定义的。这是导致错误的原因，因为 CommentBox 的渲染函数引用了

<CommentList />

jsx编译成什么

CommentList(null)

当执行此操作且 CommentList 未定义时，我们会收到错误消息，因为未定义不是函数。要解决这个问题，我们需要做的就是在调用 React.renderComponent 之前移动 CommentList 声明。

其次，Comment 和 CommentForm 没有在任何地方定义。我们需要删除对它们的引用，或者从教程中引入它们的声明。

作为引用，这是原始代码的 jsfiddle:http://jsfiddle.net/jacktoole1/nHTr4/

如果我们包含 Comment 的声明但只是删除对 CommentForm 的引用，则修复后的代码如下所示:http://jsfiddle.net/jacktoole1/VP5pa/