Facebook的react.js - 对象不是一个功能

Question

继 Facebook的read.js教程,我收到此错误:

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

事实上,react.js自己的示例页面有:

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)

当这个exectutes和CommentList未定义时,我们得到一个错误,因为undefined不是一个函数.要解决这个问题,我们需要做的就是在调用React.renderComponent之前移动CommentList声明.

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

作为参考,这里有一个原始代码的jsfiddle:http://jsfiddle.net/jacktoole1/nHTr4/

而这里的固定了代码的样子,如果我们有意见的声明,但是简单地删除提及CommentForm:http://jsfiddle.net/jacktoole1/VP5pa/