如何通过flowtype定义ref类型？

Question

我试图在react v16.4.0中通过flowtype定义ref的类型 但我无法解决它，所以请让我知道如何定义它。

这些是示例代码。 我想知道如何定义Props类型的ref。

父母

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

modules version

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

Answer 1

未来的注意事项：

createRef的类型已经改变，所以这个答案可能有点过时了。类型现在是function createRef<T>(): {current: null | T}。以下所有内容均保留以供参考。

---

看一下typedef for createRef()，我们可以看到它返回一个这种类型的对象：

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

每次我们想要指定createRef()的结果时，包含它会有点冗长，所以让我们做一个帮助器类型。 React$XXX类型应该是内部的。所以我们将使用React.XXX类型：

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

然后我们会像这样使用它：

（Qazxswpoi）

Try

Answer 2

请注意，它不适用于Flow

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

中描述的无状态功能组件

请注意，高阶组件可能会发生这种情况。

Answer 3

我现在为自己创建了一个帮助器类型来抽象出细节：

https://flow.org/en/docs/react/types/#toc-react-elementref

Answer 4

使用Flow 0.102，我得到了完美的打字：

// shared/types.js

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

// myComponent.jsx
class MyComponent extends React.Component {
  /* ... */
  myRef: ReactRef<SomeOtherComponent> = React.createRef()
}