javascript Facebook 的 react.js -- 对象不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18771166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook's react.js -- object is not a function
提问by john mangual
Going along Facebook's read.js tutorial, I get this error:
继续 Facebook 的read.js 教程，我收到此错误：
Uncaught TypeError: Property 'CommentList' of object [object Object] is not a function
In fact react.js's own examples pagehas:
实际上 react.js 自己的示例页面有：
Uncaught TypeError: object is not a function
Can anyone explain the correct usage?
任何人都可以解释正确的用法吗？
My progress in Tutorial
我的教程进度
Import the following two javascripts:
导入以下两个javascript：
http://fb.me/react-0.4.1.jshttp://fb.me/JSXTransformer-0.4.1.js
http://fb.me/react-0.4.1.jshttp://fb.me/JSXTransformer-0.4.1.js
The HTML is one line:
HTML 是一行：
<div id="content"></div>
And the javascript or rather <script type="text/jsx">looks like this:
和 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>
);
}
});
回答by Aria Buckles
There are two main issues going on here.
这里有两个主要问题。
First, when React.renderComponent is called, CommentList hasn't been assigned, and is therefore still undefined. This is causing an error because CommentBox's render function refers to
首先，当 React.renderComponent 被调用时， CommentList 还没有被赋值，因此仍然是未定义的。这会导致错误，因为 CommentBox 的渲染函数是指
<CommentList />
which jsx compiles to
jsx 编译成哪个
CommentList(null)
When this exectutes and CommentList is undefined, we get an error because undefined is not a function. To fix this, all we need to do is move the CommentList declaration before the call to React.renderComponent.
当 this executes 并且 CommentList 未定义时，我们会得到一个错误，因为 undefined 不是一个函数。为了解决这个问题，我们需要做的就是在调用 React.renderComponent 之前移动 CommentList 声明。
Second, Comment and CommentForm are not defined anywhere. We need to either remove the references to them, or bring in their declarations from the tutorial.
其次，Comment 和 CommentForm 没有在任何地方定义。我们需要删除对它们的引用，或者从教程中引入它们的声明。
For reference, here's a jsfiddle of the original code: http://jsfiddle.net/Hymantoole1/nHTr4/
作为参考，这里是原始代码的 jsfiddle：http: //jsfiddle.net/Hymantoole1/nHTr4/
And here's what the fixed up code looks like if we include the declaration of Comment but simply remove the reference to CommentForm: http://jsfiddle.net/Hymantoole1/VP5pa/
如果我们包含 Comment 声明但简单地删除对 CommentForm 的引用，则修复后的代码如下所示：http: //jsfiddle.net/Hymantoole1/VP5pa/
