how to define ref type by flowtype?

Question

I trying to define type of ref by flowtype in react v16.4.0
But I couldn't resolve it, so please let me know how to define it.

these are sample code.
I want to know how to define ref of Props type.

Parents

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

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

child

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

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

modules version

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

Answer 1

Note from the future:

The type for createRef has changed, so this answer may be somewhat out-of-date. The type is now function createRef<T>(): {current: null | T}. Everything below is retained for reference.

---

Taking a look at the typedef for createRef(), we can see it returns an object with this type:

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

It would be a little verbose to include that every time we wanted to specify the result of createRef(), so let's make a helper type. The React$XXX types are supposed to be internal. So we'll use the React.XXX types instead:

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

And then we'll use it like this:

(Try)

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>
  )
}