1

我有一个新项目，我尝试使用 react-grid-layout 来构建仪表板。不幸的是，我无法让它工作。

我用：

"@types/react-grid-layout": "0.16.5" "react-grid-layout": "0.16.5"

当我尝试在 tsx 文件中使用它时

import { ReactGridLayout } from 'react-grid-layout';

我得到错误：

/node_modules/@types/react-grid-layout/index"' 没有导出的成员 '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<RouteComponentProps<{}>, {}> {
    //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>;
    }
}
4

2 回答 2

2

最后，我使用https://github.com/Microsoft/TypeScript-React-Starter/issues/8中的以下步骤使其工作 长话短说：添加"esModuleInterop": true, "allowSyntheticDefaultImports": true,到您的 tsconfig.json 文件中。在那之后，一切都像一个魅力。如果其他人在 .net 核心反应应用程序中遇到类似问题，希望能有所帮助。

于 2018-12-12T22:09:14.560 回答
0

有时，同名导入在 JavaScript 中有效，但在 TypeScript 中无效。尝试使用require，它对我有用。

const ReactGridLayout = require('react-grid-layout');

我有一个 TypesScript 的工作示例 https://codesandbox.io/s/5x5nyjqjwl

于 2018-12-11T07:39:33.230 回答