web-dev-qa-db-fra.com

Comment utiliser Flow avec React.createRef ()?

Depuis React 16.3 il est possible d'utiliser React.createRef() pour accéder à un élément DOM. J'utilise également Flow in mon projet, mais le la documentation utilise toujours l'ancienne méthode .

Le code ci-dessous échoue malheureusement:

/* @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} />
    )
  }
}

avec l'erreur suivante:

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

Comment le taper correctement?

reactjsflowtype
16
Zardoz

Examen de la définition du type de flux pour React.createRef () :

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

J'ai pu faire quelque chose comme ça dans mon code

/* @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

Il y a un problème lié github .

Si ce n'est pas encore résolu, vous pouvez le taper vous-même:

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

Voici comment il est tapé en interne dans réagir aux définitions de type de bibliothèque .

1
Tomasz Mularczyk

Si vous utilisez des "propriétés de classe", vous pouvez createRef() de la manière suivante:

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

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

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