Javascript React教程呈现CommentForm和CommentList时出错

我刚开始学习React官方教程，我似乎遇到了一个错误，阻止浏览器显示内容，可能是一些愚蠢的打字错误，但我似乎找不到它。当我删除

和

时，在

var CommentBox

中，仅显示元素

注释

，但当我添加它们时，浏览器中不会显示任何内容，甚至

注释

。我忽略了什么，有什么想法吗？谢谢

我的代码

<div id="content"></div>
    <script type="text/jsx">

      var CommentBox = React.createClass({
        render: function () {
          return (
            <div className="commentBox">
              <h1>Comments</h1>
              <CommentList />
              <CommentForm />
            </div>
          );
        }
      });
      React.render(
        <CommentBox />,
        document.getElementById('content')
      );

      var CommentList = React.createClass({
        render: function () {
          return (
            <div className="commentList">
              Hello, world! I am a CommentList.
            </div>
          );
        }
      });

      var CommentForm = React.createClass({
        render: function () {
          return (
            <div className="commentForm">
              Hello, world! I am a CommentForm.
            </div>
          );
        }
      });

    </script>

var CommentBox=React.createClass({
渲染：函数（）{
返回(
评论
);
}
});
反应(
,
document.getElementById（'content'）
);
var CommentList=React.createClass({
渲染：函数（）{
返回(
你好，世界！我是一个评论列表。
);
}
});
var CommentForm=React.createClass({
渲染：函数（）{
返回(
你好，世界！我是一个评论人。
);
}
});

您需要将“CommentList”和“CommentForm”的var声明移动到脚本标记顶部的“CommentBox”上方。因为在javascript中有提升。我在github中举了一个例子：

您是否正在将代码jsx传输到js？我正在通过

node server.js运行它

这是调用

React.render（）的位置

这是问题的最终原因-

CommentList

和

CommentForm

在最初调用

CommentBox#render（）时尚未分配值。