web-dev-qa-db-ja.com

React.createRef（）でFlowを使用する方法は？

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].

正しく入力するにはどうすればよいですか？

reactjsflowtype
16
Zardoz

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} />
    )
  }
}
19
allienx

関連する github issue があります。

まだ修正されていない場合は、自分で入力できます。

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

これは、 reactライブラリタイプ定義 で内部的に入力される方法です。

1
Tomasz Mularczyk

「クラスプロパティ」を使用している場合、次の方法でcreateRef()することができます。

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

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

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