如何找到reactJS错误？

Question

我已经学习ReactJS几天了，但我常常在'/'应用程序页面中找到一个服务器错误，并没有真正指出锁定问题的位置。 例如，这是我现在得到的错误：

Server Error in '/' Application.

In file "~/Scripts/Grid.jsx": Parse Error: Line 106: Adjacent XJS elements must be wrapped in an enclosing tag (at line 106 column 58) Line: 52 Column:3

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: React.Exceptions.JsxException: In file "~/Scripts/Grid.jsx": Parse Error: Line 106: Adjacent XJS elements must be wrapped in an enclosing tag (at line 106 column 58) Line: 52 Column:3

Source Error: 


Line 8:  { Line 9:      <h2>Index</h2> Line 10:     @Html.React("GridBox", new Line 11:     { Line 12:         tableClass
= "GridTest",

Source File: c:\Development\Bradspel_v2\Bradspel_v2\Views\Home\Index.cshtml    Line: 10

代码如下所示：

var data1 = {"Columns":[{"Title":"Title1","HTMLClass":"g1_Title"},{"Title":"Title2","HTMLClass":"g2_Title"},{"Title":"Title3","HTMLClass":"g3_Title"}],"Rows":[{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]}]};


var GridRow = React.createClass({
    render: function() {
        var data = [], columns;

        if(this.props.columns){
            for(var i = 0; i < this.props.columns.length; i++){
                data.push({
                    HTMLclass: this.props.columns[i].HTMLClass,
                    content: this.props.cells[i]
                })
            }
        }


        columns = data.map(function(col, i) {
            return (
                <td className={col.HTMLclass} key={i}>{col.content}</td>
            );
        }.bind(this));

        return (
            <tr>
                {columns}
            </tr>
        );
    }
});
var GridHead = React.createClass({
    render: function() {
        if(this.props.data){
            var cell = this.props.data.Title;
            var htmlClass = this.props.data.HTMLClass;
        }
        return (
            <th className={htmlClass}>{cell}</th>
        );
    }
});
var GridList = React.createClass({
    render: function() {
        var tableClass = this.props.tableClass;
        if(this.props.data){
            var header = this.props.data.Columns.map(function (columns, i) {
                return (
                    <GridHead data={columns} key={i} />
                );
            });
            var row = this.props.data.Rows.map(function (row, i) {
                return ( **<<< HERE line 52**
                    <GridRow columns={data1.Columns} cells={row.Cells} key={i} />
                );
            });
        }
        return (
            <table className={tableClass}>
                <tr>{header}</tr>
                <tbody>
                    {row}
                </tbody>
            </table>
        );
    }
});

var GridPager = React.createClass({
    handleClick: function(event) {
        alert('clicked');
    },
    return: function() {

        var page


        return(
            <a onClick={this.handleClick}>Paging</a>
        );
    }
});


var GridBox = React.createClass({
    loadCommentsFromServer: function() {
        var xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = function() {
          var data = JSON.parse(xhr.responseText);
          this.setState({ data: data });
        }.bind(this);
        xhr.send();
    },
    getInitialState: function() {
        return { data: this.props.initial };
    },
    render: function(){
        var tableClass = this.props.tableClass;
        return (
            <GridList data={data1} tableClass={tableClass} />
            <GridPager>
        );
    }
});

106行有一个问题，这是最后一行代码之后的行，所以这对我没有任何帮助。 然后我们得到了第52行。我在上面的代码（<<< HERE line 52）中标记了第52行，你可以看到只有一个回报？ 那么我是如何真正地设法找到错误的真正原因呢？

信息：我使用Visual Studio 2013 ASP.NET MVC 5和ReactJS.NET，并使用Sublime TEXT 3编辑jsx文件。

Answer 1

React期望从render方法返回单个元素。 div需要包裹在GridBox渲染方法返回中呈现的组件周围。 GridPager也缺少它的结束标记：

 render: function(){
    var tableClass = this.props.tableClass;
    return (
        <div>
            <GridList data={data1} tableClass={tableClass} />
            <GridPager/>
        </div>
    );
}