为什么 React 的 babel 在 IE 上抛出重复对象错误，jqgrid？

Question

我已经加载了以下关于汽车年度检查维护数据的 jqGrid 网格。

在 chrome 上看起来像这样：

这是作为react对象生成的，代码如下：

HTML:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css" />
    </head>
    <body>

    <div id="divContainer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>

    <script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

    <script type="text/babel" src="sample.jsx">
    </script>



    </body>
    </html>

JSX代码：

var SampleGrid = React.createClass({
    componentDidMount:function(){
        this.gridLoad();
    },
    gridLoad:function(){
        var mydata = [
            { id: "1", test: "Engine checkup", teststart: "12/12/2016", testend: "12/30/2016", passed: true},
            { id: "2", test: "Electrical Checkup", teststart: "1/2/2017", testend: "1/3/2017", passed: false},
            { id: "3", test: "Chasis checkup", teststart: "1/4/2017", testend: "1/5/2017", passed: false},
            { id: "4", test: "Aerodynamics checkup", teststart: "1/6/2017", testend: "1/9/2017", passed: true},
            { id: "5", test: "Balance and stability checkup", teststart: "1/10/2017", testend: "1/12/2017", passed: true},
            { id: "6", test: "Report", teststart: "", testend: "", closed: false }
        ];

        jQuery("#grid100").jqGrid({
            colNames: ['test','passed','test started','test ended'],
            colModel: [
                {name: 'test', index: 'test', width: 220 },
                {name: 'passed', index: 'passed', width: 60, align: 'center', formatter: 'checkbox',
                    edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}, formatoptions: { disabled: false},
                    cellattr: function(rowId, tv, rawObject, cm, rdata) {
                        if (Number(rowId) == 6) { return ' colspan="3"'  }},
                    formatter:function(cellvalue, options, rowObject)
                    {
                        if(rowObject.id==6)
                        {
                            return '<input type="text" id="txtnotes" ref="refnotes" />';
                        }
                        else
                        {
                            if(rowObject.passed===true)
                            {
                                return '<input type="checkbox"  id="cbPassed-'+ rowObject.id +'" checked/>';
                            }
                            else
                            {
                                return '<input type="checkbox"  id="cbPassed-'+rowObject.id+ '"  />';
                            }
                        }
                    }

                },
                {name: 'teststart', index: 'teststart', width: 75, formatter: 'string', sorttype: 'string', align: 'center',
                    cellattr: function(rowId, tv, rawObject, cm, rdata) {
                        if (Number(rowId) == 6) { return ' style="display:none;"'  }}},//return ' colspan="5"'
                {name: 'testend', index: 'testend', width: 75, formatter: 'string', sorttype: 'string', align: 'center',
                    cellattr: function(rowId, tv, rawObject, cm, rdata) {
                        if (Number(rowId) == 6) { return ' style="display:none;"' }}}

            ],
            rowNum: 10,
            rowList: [5, 10, 20],
            threeStateSort:true,
            gridview: true,
            rownumbers: false,
            autoencode: true,
            ignoreCase: true,
            sortname: "id",
            viewrecords: true,
            sortorder: "desc",
            shrinkToFit: false,

        });
        for(var i=0;i<=mydata.length;i++)
            jQuery("#grid100").jqGrid('addRowData',i+1,mydata[i]);

        jQuery("#grid100").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders:[
                {startColumnName: 'passed', numberOfColumns: 3, titleText: 'Test Duration'}
            ]
        });
    },
    render:function(){
        return(<div id="gridContainer" ref="refContainer">
                <form>
                    <table id="grid100"></table>
                </form>
            </div>
        )
    }
})

ReactDOM.render(<SampleGrid />, document.getElementById('divContainer'));

但这很有趣。当我运行 chrome 中的代码时，它工作得很好，但是当我运行在 IE 上运行时（我的版本是 10），它在控制台

上给出以下错误

SCRIPT1046: 在严格模式下不允许属性的多个定义

目前我不明白为什么相同的代码在一个浏览器中产生结果，而在另一个浏览器中却没有。但我知道出现此错误是因为我已将 formater 添加到 passed

列

 formatter:function(cellvalue, options, rowObject)
            {
                if(rowObject.id==6)
                {
                    return '<input type="text" id="txtnotes" ref="refnotes" />';
                }
                else
                {
                    if(rowObject.passed===true)
                    {
                        return '<input type="checkbox"  id="cbPassed-'+ rowObject.id +'" checked/>';
                    }
                    else
                    {
                        return '<input type="checkbox"  id="cbPassed-'+rowObject.id+ '"  />';
                    }
                }
            }

我该如何解决这个问题？

Answer 1

问题原因：passed列使用了多个formatter属性（见formatter: 'checkbox', ..., formatter:function(cellvalue, options, rowObject) {...}）。您应该从代码中删除或评论 formatter: 'checkbox'。

我另外推荐你：

从不在循环中使用 addRowData 用数据填充网格。您应该从代码中删除 for(var i=0;i<=mydata.length;i++) jQuery("#grid100").jqGrid('addRowData',i+1, mydata[i]); 行。此外，您应该添加 data: mydata 参数并删除不需要的 sortorder: "desc" 选项。
从 colModel

index

删除不需要的选项gridview: true, rownumbers: false, ignoreCase: true。所有值在免费的 jqGrid 中已经是默认值。

为什么 React 的 babel 在 IE 上抛出重复对象错误，jqgrid？

why react's babel throws duplicate object error, jqgrid on IE?

jqgrid