与 Kendo-ui Grid 反应 - 错误的列标题

Posted 2023-02-22

【中文标题】与 Kendo-ui Grid 反应 - 错误的列标题

【英文标题】：React with Kendo-ui Grid - Wrong column header

【发布时间】：2019-02-08 18:20:02

【问题描述】：

我有一个使用 redux 作为状态管理器的 React 应用程序。在这个应用程序中，我们决定使用 Kendo Ui 网格。第一个测试是好的，但我们注意到列完全错误。我们只定义了要在表中显示的 5 列，但我们注意到 json 对象中的所有列都被显示了。例如在渲染方法中我有这个代码：

render() 
        return (
            <div>
                <Grid
                    style= height: '400px' 
                    data=this.state.gridData
                >
                    <Column field="ProductID" title="ID"  />
                    <Column field="ProductName" title="Name"  />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price"  />
                    <Column field="UnitsInStock" title="In stock"  />
                </Grid>
            </div>
        );
    

应该只显示：

ID  |  Name  |  CategoryName  |  Price  |  In stock

但它呈现的是那些标题：

ProductID | ProductName | SupplierID | CategoryID | UnitPrice | UnitsInStock

直接来自json对象：

"ProductID " : 1,
"ProductName" : "Chai",
"SupplierID" : 1,
"CategoryID" : 1,
"UnitPrice" : 18.0000,
"UnitsInStock" : 39

换句话说，无论我定义哪些列（如<Column /> 标记），网格始终将 json 字段显示为列标题。

以下库被导入：

import  Grid, GridColumn as Column, GridCell  from '@progress/kendo-react-grid';

我正在使用此页面中的示例： https://www.telerik.com/kendo-react-ui/components/grid/

控制台没有错误，所以很难找到发生了什么。 有什么想法吗？

更新： 我添加了这个 console.log 语句，我看到这些列是空的：

constructor(props: IProps) 
   super(props);
   this.state =  producuts: [ ProductID: 'Cindy', ProductName: 'Jones', UnitPrice: '[e-mail]' ]
        ;

        this.grid = null;
      
      render() 
        return (
          <div>
                <Grid
                    data=this.state.producuts
                    reorderable=true
                    ref=(g) =>  this.grid = g; 
                >
                    <GridColumn field="ProductID" title="ID" />
                    <GridColumn field="ProductName" title="Name" />

                </Grid>
                <button onClick=() => 
                  console.log(this.grid);
                  console.log(JSON.stringify(this.grid.columns));
                  >
                  log current properties into browser console.
                </button>
          </div>
        );
      

这一行console.log(JSON.stringify(this.grid.columns)) 总是有空数组结果[]

虽然标题应该是：

ID | Name

但它们看起来像这样：

【问题讨论】：

无法复制。在这里工作正常。 codesandbox.io/s/x7p9ow62lo

@MurliPrajapati 这正是我遇到的问题，它只能在我的应用程序中重现

尝试重新安装剑道依赖。

从package.json 中移除剑道依赖并再次执行npm install。

不幸的是，它没有帮助！！

【参考方案1】：

我最近遇到了同样的问题。我们正在使用“react-hot-loader”，这会导致您描述的错误。

在grid的源码中是一个类型比较：

this.initColumns(children.filter(function (child)  return child && child.type === GridColumn; ));

使用 react-hot-loader 时，Column 不是 GridColumn 类型，而是 Proxycomponent 类型。所以类型检查失败，网格呈现默认列。

解决方法：

reactHotLoader.disableProxyCreation = true;

var grid = (<KendoGrid data=  data: this.state.Products, total: 1 
  pageable=true  >
  <KendoColumn field="ProductName" title="Product Name" />
  <KendoColumn field="UnitPrice" title="Unit Price" format="0:c"  />
  <KendoColumn field="UnitsInStock" title="Units In Stock"  />
  <KendoColumn field="Discontinued"  />
</KendoGrid>);

reactHotLoader.disableProxyCreation = false;

禁用代理创建可以解决问题，但是这种解决方法很脏。

我们在项目中禁用了 react-hot-loader 来解决这个问题。

【讨论】：

工作！！谢谢