如何找到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>
    );
}