Question

我试图弄清楚canvas元素的正确类型。无论我做什么 - 它都行不通。我已经尝试了所有可能的html元素类型，但流程表示它们不兼容。那么为什么我不能将canvas元素分配给HTMLCanvasElement变量？

有什么想法吗？

node参数是包含canvas元素的div元素。这很简单。如果我删除类型，一切正常。

export class Graph extends Component {
      draw = (node: HTMLDivElement) => {
        let canvas: HTMLCanvasElement = node.firstChild
        if (canvas){
          canvas.width = parseInt(getComputedStyle(node).getPropertyValue('width'))
          canvas.height = parseInt(getComputedStyle(node).getPropertyValue('height'))
        }
        let chart = new Chart(canvas, {
          type: this.props.type,
          data: this.props.data
        })
      }
      render = () => (
        <div ref={this.draw} className='graph'>
          <canvas />
        </div>
      )
    }

我从流linter中得到这些错误：

Node This type is incompatible with HTMLCanvasElement
null This type is incompatible with HTMLCanvasElement
undefined This type is incompatible with HTMLCanvasElement

由于

P.S。它是地狱 - 而不是反应。所以ref是一个函数，而不是一个字符串。只是为了避免人们纠正这一点。

Answer 1

看起来在{flow}内部未定义HTMLDivElement： https://github.com/facebook/flow/blob/v0.43.1/lib/dom.js#L2811

HTMLDivElement和HTMLCanvasElement是兄弟类型（HTMLElement的两个孩子），所以Flow自然会说将HTMLDivElement投射到HTMLCanvasElement是不安全的因为你通常不想在任何类型的系统中这样做。

您可以通过将node.firstChild投射到any来击败Flow的类型系统并解决此问题。这通常不推荐，但在这种情况下似乎可以接受，因为HTMLDivElement没有给你任何东西，你肯定知道它是什么。

let canvas: HTMLCanvasElement = (node.firstChild: any)

feel free to also view the flowtype.org/try link

Canvas元素的正确类型

1 个答案: