与 Kendo-ui 网格反应 - 错误的列 header

Question

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

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

应该只显示：

ID  |  Name  |  CategoryName  |  Price  |  In stock

但它呈现的是那些 headers:

ProductID | ProductName | SupplierID | CategoryID | UnitPrice | UnitsInStock

哪些是直接来自 json object:

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

换句话说，无论我定义哪一列（作为 <Column /> 标记），网格始终将 json 字段显示为列 headers.

导入了以下库：

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: 'cindy.jones@telerik.com' }]
        };

        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)) 总是空数组结果 []

尽管 headers 应该是：

ID | Name

但它们看起来像这样：

Answer 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}" width="120px" />
  <KendoColumn field="UnitsInStock" title="Units In Stock" width="120px" />
  <KendoColumn field="Discontinued" width="120px" />
</KendoGrid>);

reactHotLoader.disableProxyCreation = false;

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

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

与 Kendo-ui 网格反应 - 错误的列 header

React with Kendo-ui Grid - Wrong column header

json

reactjs

typescript

kendo-ui

kendo-ui-grid