javascript - 如何查找 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 行。我在上面的代码中标记了第 52 行(<<< HERE 第 52 行)，你可以看到只有一个返回？那么我真的应该如何设法找到错误的真正位置呢？

信息:我使用带有 ReactJS.NET 的 Visual Studio 2013 ASP.NET MVC 5 并使用 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>
    );
}