尝试在React Component中向Kendo Grid添加简单过滤器时出错

问题描述

我在向剑道网格添加过滤器时遇到问题，因此要排除故障，我去了

[Kendo React过滤文档/示例1

我将第一个示例“过滤器行”的main.jsx和sample-products.jsx代码原样复制到了本地主机上的一个应用程序中，但是仍然遇到相同的错误。我无法在直接从文档中复制的vscode中编译main.jsx。我知道代码“有效”，因为您可以单击链接中的“在stackblitz中打开”，它可以正常工作。

这是main.jsx（从文档中复制）和以下错误。

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid,GridColumn as Column } from '@progress/kendo-react-grid';
import { filterBy } from '@progress/kendo-data-query';
import { sampleProducts } from '../data/sample-products.jsx';

class PositionsPanel extends React.Component {
    state = {
        filter: {
            logic: "and",filters: [
                { field: "ProductName",operator: "contains",value: "Chef" }
            ]
        }
    };
    render() {
        return (
            <Grid
                style={{ height: '420px' }}
                data={filterBy(sampleProducts,this.state.filter)}
                filterable
                filter={this.state.filter}
                onFilterChange={(e) => {
                    this.setState({
                        filter: e.filter
                    });
                }}
            >
                <Column field="ProductID" title="ID" filterable={false} width="60px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="FirstOrderedOn" width="240px" filter="date" format="{0:d}" />
                <Column field="UnitPrice" width="180px" filter="numeric" format="{0:c}" />
                <Column field="discontinued" width="190px" filter="boolean" />
            </Grid>
        );
    }
}

export default PositionsPanel

您知道什么可能导致相同的代码在Stackblitz中编译/工作，而在vscode中不工作吗？也许我不确定包是否过时？谢谢！

解决方法

该错误来自我的本地文件是打字稿.jsx。该文档中使用的版本是.js。一旦我将文件另存为JS，它就可以正常工作。