Question

我刚开始使用官方的React教程，我似乎遇到了阻止浏览器显示内容的错误，这可能是一些愚蠢的错误，但我似乎无法找到它。在var CommentBox删除<CommentList />和<CommentForm />时，只会显示元素<h1>Comments</h1>，但是当我添加它们时，浏览器中就不显示任何内容，即使是<h1>Comments</h1> 。我有什么看法，有什么想法吗？谢谢！

我的代码

<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>

Answer 1

您需要移动＆＃34; CommentList＆＃34;的var声明。和＃34; CommentForm＆＃34;在脚本标记的顶部，上面是＆＃34; CommentBox＆＃34;。因为在javascript中有提升。我在github中添加了一个例子：https://github.com/josemato/stackoverflow/blob/master/reactjs-tutorial/index.html

React教程错误呈现CommentForm和CommentList

1 个答案: