Как использовать Flow с React.createRef()?

Так как React 16.3 можно использовать React.createRef() для доступа к элементу DOM. Я также использую Flow в своем проекте, но документация по-прежнему использует старый способ.

К сожалению, код ниже:

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

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

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

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

со следующей ошибкой:

Cannot instantiate 'Ref' because in type argument 'ElementType':
 - Either a callable signature is missing in 'HTMLDivElement' [1] but exists in
   'React.StatelessFunctionalComponent' [2].
 - Or 'HTMLDivElement' [1] is incompatible with statics of 'React.Component' [3].

Как правильно ввести его?

Ответ 1

Посмотрим на определение типа потока для React.createRef():

declare export function createRef<ElementType: React$ElementType>(
): {current: null | React$ElementRef<ElementType>};

Я смог сделать что-то подобное в моем коде

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

export class TestComponent extends React.Component<{}> {
  myRef: { current: null | HTMLDivElement }

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

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

Ответ 2

Существует связанная проблема github.

Если он еще не исправлен, вы можете ввести его самостоятельно:

type RefObject = {|
  current: any,
|};

Вот как он типизируется внутри в определении типов библиотек реакции.

Ответ 3

Если вы используете "свойства класса", вы можете createRef() следующим образом:

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

export class TestComponent extends React.Component<{}> {
  myRef = React.createRef<HTMLElement>();

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

Ответ 4

Возможно, это не оптимально, но это, похоже, работает

class MyComponent extends Component<Props, State> {
   myRef: Object = React.createRef()

   ...
}

Если у кого-то есть лучший подход, пожалуйста, поделитесь/комментируйте