用打字稿反应网格布局不起作用

时间:2018-12-11 01:30:53

标签: reactjs typescript typescript-typings react-grid-layout

我有一个新项目,我尝试使用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>; } }

2 个答案:

答案 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