我如何解决“Gantt”类型问题中不存在“ganttContainer”属性

问题描述

我想在 Dhtmlx 库中使用甘特图 使用打字稿,我发现甘特图的启动错误。那么我该如何解决呢? 这是代码

import React from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import VayuModule,{ VayuModuleState } from '../../../VayuModule';
import './Gantt.scss';

export interface GanttState extends VayuModuleState {}

class Gantt extends VayuModule<any,GanttState> {
  Gantt: any;
  public render(): JSX.Element {
    return <div className="Gantt-container"></div>;
  }

  protected getDefaultState(): GanttState {
    return {};
  }

  componentDidMount() {
    const { tasks } = this.props;
    gantt.init(this.ganttContainer);
    gantt.parse(tasks);
  }

这是错误

Property 'ganttContainer' does not exist on type 'Gantt'.  TS2339

    19 |   componentDidMount() {
    20 |     const { tasks } = this.props;
  > 21 |     gantt.init(this.ganttContainer);
       |                     ^
    22 |     gantt.parse(tasks);

解决方法

最简单的方法是在使用 this.ganttContainer 之前添加以下行:

// @ts-expect-error

这是演示:

https://files.dhtmlx.com/30d/9e7b693971f68966ca9b658e86bf7eda/react+tsx.zip