Question

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

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

但是它呈现的是那些标题：

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: '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))的数组结果始终为空[]

尽管标题应该是：

ID | Name

，但它们看起来像这样：

Answer 1

我最近遇到了同样的问题。我们正在使用“反应热加载器”，这会导致您描述的错误。

在网格的源代码中是类型比较：

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 Grid反应-错误的列标题

1 个答案: