我有一个新项目,我尝试使用react-grid-layout构建仪表板。不幸的是,我无法使其正常工作。
我使用:
"@types/react-grid-layout": "0.16.5"
"react-grid-layout": "0.16.5"
当我尝试在带有import { ReactGridLayout } from 'react-grid-layout';
的tsx文件中使用它时
我得到错误:
/node_modules/@types/react-grid-layout/index"' has no exported member 'ReactGridLayout'.
有人建议我在做什么错吗?
其他信息:我在运行于.Net core 2.1的SPA Webapp中使用了它 我如何使用它:
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import ReactGridLayout, { Layout } from 'react-grid-layout';
//const ReactGridLayout = require('react-grid-layout');
export class Dashboard extends React.Component, {}> {
//ReactGridLayout = require('react-grid-layout');
public render() {
//const ReactGridLayout = require('react-grid-layout');
var layout = [
{ i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
{ i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
{ i: 'c', x: 4, y: 0, w: 1, h: 2 }
];
return <div>
<ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
<div key="a">a</div>
<div key="b">b</div>
<div key="c">c</div>
</ReactGridLayout>
</div>;
}
}
答案 0 :(得分:1)
最后,我通过https://github.com/Microsoft/TypeScript-React-Starter/issues/8中的以下步骤使它起作用
长话短说:
将"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
添加到您的tsconfig.json文件中。之后,所有这些都像魅力一样。
希望对其他人在.net核心React应用程序中遇到类似问题有帮助。
答案 1 :(得分:0)
有时,相同名称的导入在JavaScript中有效,但在TypeScript中无效。尝试require,它对我有用。
const ReactGridLayout = require('react-grid-layout');
我有一个使用TypesScript的有效示例 https://codesandbox.io/s/5x5nyjqjwl