[英]Facebook's react.js — object is not a function
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 page has: 事实上,react.js自己的示例页面有:
Uncaught TypeError: object is not a function
Can anyone explain the correct usage? 任何人都能解释正确的用法吗?
Import the following two javascripts: 导入以下两个javascripts:
http://fb.me/react-0.4.1.js
http://fb.me/JSXTransformer-0.4.1.js
http://fb.me/react-0.4.1.js
http://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>
);
}
});
There are two main issues going on here. 这里有两个主要问题。
First, when React.renderComponent is called, CommentList hasn't been assigned, and is therefore still undefined. 首先,当调用React.renderComponent时,尚未分配CommentList,因此仍未定义。 This is causing an error because CommentBox's render function refers to
这导致错误,因为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. 当这个exectutes和CommentList未定义时,我们得到一个错误,因为undefined不是一个函数。 To fix this, all we need to do is move the CommentList declaration before the call to React.renderComponent.
要解决这个问题,我们需要做的就是在调用React.renderComponent之前移动CommentList声明。
Second, Comment and CommentForm are not defined anywhere. 其次,Comment和CommentForm没有在任何地方定义。 We need to either remove the references to them, or bring in their declarations from the tutorial.
我们需要删除对它们的引用,或者从教程中引入它们的声明。
For reference, here's a jsfiddle of the original code: http://jsfiddle.net/jacktoole1/nHTr4/ 作为参考,这里有一个原始代码的jsfiddle: http : //jsfiddle.net/jacktoole1/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/jacktoole1/VP5pa/ 如果我们包含Comment的声明,只是删除对CommentForm的引用,这就是修复代码的样子: http : //jsfiddle.net/jacktoole1/VP5pa/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.