沿着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>
);
}
});
解决方法
这里有两个主要问题.
首先,当调用React.renderComponent时,尚未分配CommentList,因此仍未定义.这导致错误,因为CommentBox的渲染函数引用
<CommentList />
哪个jsx编译成
CommentList(null)
当这个exectutes和CommentList未定义时,我们得到一个错误,因为undefined不是一个函数.要解决这个问题,我们需要做的就是在调用React.renderComponent之前移动CommentList声明.
其次,Comment和CommentForm没有在任何地方定义.我们需要删除对它们的引用,或者从教程中引入它们的声明.
作为参考,这里是原始代码的jsfiddle：http://jsfiddle.net/jacktoole1/nHTr4/
如果我们包含Comment的声明,只需删除对CommentForm的引用,这就是修复代码的样子：http://jsfiddle.net/jacktoole1/VP5pa/