Grafana在里面用画布反应插件

Question

我正试图用画布写一个grafana react插件。我用npx @grafana/toolkit plugin:create my-plugin创建了我的模板。我使用yarn install，yarn dev --watch运行了这个模板。它起作用了。

为了进行测试，我在module.ts文件中删除了如下选项

import { PanelPlugin } from '@grafana/data';
import { SimplePanel } from './SimplePanel';

export const plugin = new PanelPlugin(SimplePanel);

我修改了SimplePanel.tsx文件如下

import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';

export class SimplePanel extends PureComponent<PanelProps> {
    componentDidMount() {
        console.log(this.refs.canvas)
        const ctx = this.refs.canvas.getContext('2d');
        console.log(ctx)
    }

    render() {
        return (
                <canvas ref="canvas" width={300} height={300}/>
        );
    }
}

我得到了以下错误：

属性'getContext‘在'ReactInstance’类型中不存在。

属性'getContext‘在类型'Component< any，{}，any>’上不存在。

如何在grafana中添加画布，react插件？

谢谢你的回答。

Answer 1

由于MateuszFalkowski的评论，我设法添加了一个画布：

import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';

export class SimplePanel extends PureComponent<PanelProps> {

    myCanvasRef = React.createRef<HTMLCanvasElement>()

    componentDidMount() {
        console.log(this.myCanvasRef)
        const ctx = this.myCanvasRef.current!.getContext('2d');
        console.log(ctx)
    }

    render() {
        return (
                <canvas ref={this.myCanvasRef} width={300} height={300}/>
        );
    }
}