javascript - 如何将第三方库 (gridstack.js) 与 Typescript 和 React 结合使用

Question

也许我缺少 Typescript 和/或 React 的一些基本概念，但我无法使以下内容发挥作用:

1. 我正在使用React/Typescript Boilerplate作为我的应用程序模板。 (这里没有问题)。

2. 另一方面，我使用的是一个名为 GridStack.js 的纯 JS 库。使用 $.fn.gridstack(options) 扩展 jQuery。当您将此库导入到简单的 HTML 页面中时，您只需调用 $('.grid-stack').gridstack(options) 来初始化它。 (仍然没有问题)。

3. 然后我的目标是为 gridstack.js 创建一个可以在我的样板中使用的 TypeScript/React 包装器。这是我遇到问题的地方。我在 typescript 和 react 之间有点迷失，我什至找到了 wrapper for React还有Gridstack.js typings但我无法让一切都协同工作。这就是为什么我决定尝试创建自己的包装器但仍然没有成功。特别是在哪里导入 react-gridstack 或 gridstack 使其工作。

有人可以解释一下我错过了什么吗？这是我到目前为止的代码:

gridstackWrapper.tsx:

import * as React from 'react';
import * as $ from 'jquery';

export default class extends React.Component {
    public shouldComponentUpdate() {
        return false;
    }

    public componentDidMount() {
        $(this.refs.gridstack).addClass('a-new-class');  // THIS WORKS

        // ERROR: TypeError: $(...).gridstack is not a function
        // So basically $.fn.gridstack(options) is not working
        $(this.refs.gridstack).gridstack(this.gridstackOptions);
    }

    public render() {
        return (
            <div ref="gridstack" className="grid-stack" />
        );
    }

    private gridstackOptions = {
        float: false,
        animate: true,
        resizable: {handles: 'se, sw'},
        verticalMargin: 12,
        placeholderText: 'Move Control Here',
        minWidth: 767,
    };
}

index.tsx:

import * as React from 'react';
import GridstackWrapper from './gridstackWrapper';

class About extends React.Component<any, any> {
  public render() {
    return (
      <GridstackWrapper />
    );
  }
}

export { About }

package.json:

"devDependencies": {
    "@types/gridstack": "0.0.38",
    "@types/jquery": "3.2.12",
    "@types/jqueryui": "1.11.36",
    "@types/lodash": "4.14.74",
}
"dependencies": {
    "gridstack": "0.3.0",
    "jquery": "3.2.1",
    "jquery-ui": "1.12.1",
    "lodash": "4.17.4"
}

如果我能提供任何帮助，我将不胜感激，特别是如果我缺少有关 React 和 Typescript 的任何基本概念。

提前致谢!

Answer 1

您需要安装 gridstack 的类型定义。

运行npm install --save-dev @types/gridstack。

这将安装 DefinitelyTyped 中的 .d.ts 文件.