web-dev-qa-db-ja.com

フロータイプごとに参照タイプを定義する方法は？

Reactv16.4.0でflowtypeによって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>
}

モジュールバージョン

"react": "^16.4.0",
"flow-bin": "^0.73.0",
reactjsflowtyperef
4
sottar

将来からの注意：

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

そして、次のように使用します。

（ 試してください ）

_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>
  )
}
_
5
James Kraus

Flow https://flow.org/en/docs/react/types/#toc-react-elementref で説明されているように、ステートレス機能コンポーネントでは機能しないことに注意してください。

高次のコンポーネントで発生する可能性があることに注意してください。

0
Daniel Steigerwald

詳細を抽象化するためのヘルパータイプを作成しました。

// shared/types.js

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

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

Flow 0.102を使用すると、次のように完全に入力できます。

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