如何解决尝试在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,它就可以正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。