Question

我正在尝试从official tutorial学习React。我收到以下错误。

TypeError: Constructor Comment requires 'new' react.js:5970

我不知道自己做错了什么。我的源代码如下。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie-edge">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Hello World</title>

   </head>
   <body>
      <div id="content"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js">        
      </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js">     
      </script>

      <script type="text/babel">
         // tutorial8.js
        var data = [
                {id: 1, author: "Pete Hunt", text: "This is one comment"},
                {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
                ];

    var CommentBox = React.createClass({
        render: function() {
            return (
                <div className="commentBox">
                    <h1>Comments</h1>
                    <CommentList data={this.props.data} />
                </div>);
        }
    });

    var CommentList = React.createClass({
        render: function() {
            var commentNodes = this.props.data.map(function(comment) {
                return (
                    <Comment author={comment.author} key={comment.id}>
                        {comment.text}
                    </Comment>);
            });
            return (
                <div className="commentList">
                    {commentNodes}
                </div>
            );
        }
    });

   // Always the last step.
   ReactDOM.render(
        <CommentBox data={data} />,
       document.getElementById('content'));
</script>

Answer 1

您需要为您使用的每个组件创建一个React组件，此处没有Comment的组件。如果你看一下教程4，你会看到他们在那里做到了。

这里的每个'教程'都不是一个独立的例子。

Answer 2

解决问题的方法实际上非常简单。您遗失的只是创建Comment组件的代码。根据您设置CommentBox的方式，您可能希望它看起来像这样。

var Comment = React.createClass({
    render: function() {
        return (
            <div className="commentContainer">
                <div className='commentAuthor'>{this.props.author}</div>
                <div className='commentText'>{this.props.children}</div>
            </div>);
    }
});

反应教程提升类型错误

2 个答案: