modules version

Question

我试图通过反应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>}

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

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

Answer 2

请注意，它不适用于流程https://flow.org/en/docs/react/types/#toc-react-elementref

中所述的无状态功能组件

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

Answer 3

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

// shared/types.js

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

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

Answer 4

使用Flow 0.102，我可以完美地输入：

const componentRef = {| current: null | React.ElementRef<typeof MyComponent> |} } = React.createRef<MyComponent>()

如何通过flowtype定义ref类型？

家长

子

modules version

4 个答案: