Как определить тип ссылки по типу потока? - PullRequest
Новая
       10

Как определить тип ссылки по типу потока?

0 голосов
/ 06 июня 2018

Я пытаюсь определить тип ссылки по типу потока в реакции v16.4.0
Но я не смог ее решить, поэтому, пожалуйста, дайте мне знать, как определить это.

это пример кода.
Я хочу знать, как определить ref типа Props.

Родители 

export default class ParentComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    ....
    this.listRef = createRef();
  }

  render() {
    return (
      <ChildComponent
        listRef={this.listRef}
      />
    );
  }
}

ребенок 

type Props = {
  listRef: Ref<>, // how to define here?
};

const ChildComponent = (props: Props) => {
  <div>
    <ul ref={props.listRef}>
    ...
    </ul>
    ...
  </div>
}

версия модуля 

"react": "^16.4.0",
"flow-bin": "^0.73.0",

Ответы [ 4 ]

0 голосов
/ 13 июля 2019

Используя Flow 0.102, я прекрасно набираю: 

const componentRef = {| current: null | React.ElementRef<typeof MyComponent> |} } = React.createRef<MyComponent>()
0 голосов
/ 05 августа 2018

Обратите внимание, что это не работает для функциональных компонентов без состояния, как описано в Потоке https://flow.org/en/docs/react/types/#toc-react-elementref

Остерегайтесь, это может произойти с компонентами более высокого порядка.

0 голосов
/ 06 июня 2019

Я создал вспомогательный тип для себя, чтобы абстрагироваться от деталей: 

// shared/types.js

export type ReactRefT<T> = { current: ?T }

// myComponent.jsx
class MyComponent extends React.Component {
  /* ... */
  myRef: ReactRef<SomeOtherComponent> = React.createRef()
}
0 голосов
/ 06 июня 2018

Примечание на будущее:

Тип для createRef изменился, поэтому этот ответ может быть несколько устаревшим.Тип теперь function createRef<T>(): {current: null | T}.Все, что ниже, сохраняется для справки.

Взглянув на typedef для createRef(), мы видим, что он возвращает объект такого типа: 

{current: null | React$ElementRef<ElementType>}

Было бы немного многословно включать это каждый раз, когда мы хотели указать результат createRef(), поэтому давайте сделаем вспомогательный тип.Типы React$XXX должны быть внутренними.Поэтому мы будем использовать React.XXX типы вместо: 

type ReactObjRef<ElementType: React.ElementType> = 
  {current: null | React.ElementRef<ElementType>}

И затем мы будем использовать это так:

( Попробуйте ) 

import * as React from 'react'

type ReactObjRef<ElementType: React.ElementType> = 
  {current: null | React.ElementRef<ElementType>}

type ParentProps = {}

class ParentComponent extends React.Component<ParentProps, null> {
  listRef: ReactObjRef<'ul'>

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

  render() {
    return (
      <ChildComponent
        listRef={this.listRef}
      />
    );
  }
}

type ChildProps = {
  listRef: ReactObjRef<'ul'>,
};

const ChildComponent = (props: ChildProps) => {
  const hoge = props.listRef.current;
  return (
    <div>
      <ul ref={props.listRef}>
      </ul>
    </div>
  )
}
...