如何结合Flow使用React.createRef()？React 16.3代码报错求助

嗨，我懂你遇到的这个糟心事——React 16.3+用React.createRef()访问DOM明明很方便，但Flow旧文档的写法没跟上，导致代码跑不起来对吧？我来帮你把问题捋顺！

问题根源 #

你代码里的类型标注踩了个常见误区：React.Ref<HTMLDivElement>是ref属性接受的联合类型（它支持回调函数或者RefObject两种形式），但React.createRef()返回的是React.RefObject<T>类型，两者不匹配，这就是Flow报错的核心原因。

修正后的代码 #

直接上能跑的正确写法：

/* @flow */
import * as React from 'react';

export class TestComponent extends React.Component<{}> {
  // 把类型改成React.RefObject，和createRef的返回值对应
  myRef: React.RefObject<HTMLDivElement> = React.createRef();

  render() {
    return (
      <div ref={this.myRef} />
    );
  }
}

可选的constructor写法 #

如果你习惯在constructor里初始化属性，也可以这么写，注意类型标注还是要保持React.RefObject：

/* @flow */
import * as React from 'react';

export class TestComponent extends React.Component<{}> {
  myRef: React.RefObject<HTMLDivElement>;

  constructor(props: {}) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return (
      <div ref={this.myRef} />
    );
  }
}

这样修改后，Flow就能正确识别myRef的类型，不会再抛出错误啦！

内容的提问来源于stack exchange，提问作者medihack