Question

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

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行（＆lt;＆lt;＆lt;＆lt;＆lt; HERE第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>
    );
}

如何找到reactJS错误？

1 个答案: