web-dev-qa-db-ja.com

子の反応要素のフロータイプアノテーション

childrenにタイプ注釈を付けるより良い方法はありますか？

type FilterLinkProps={
  filter:State$VisibilityFilter,
  children:any
};

const FilterLink = ({
  filter,
  children
}:FilterLinkProps) => {
  return (
    <a href='#'
      onClick={e => {
        e.preventDefault();
        store.dispatch(({
          type: 'SET_VISIBILITY_FILTER',
          filter
        }:Action$VisibilityFilter));
      }}
    >
    {children}
    </a>
  );
};
javascriptreactjsflowtype
11
jhegedus

のようには見えません。

公式から React libdef ：

declare module react {
  declare var Children: any;
  ...
}

その後

declare function cloneElement<Config> (
    element: React$Element<Config>,
    attributes: $Shape<Config>,
    children?: any
  ): React$Element<Config>;
8
Gabriele Petronella

Flow v0.53は、箱から出してchildrenをサポートします!!

import * as React from 'react';

type Props = {
  children?: React.Node,
};

詳細については、 公式ドキュメント または次の ブログ投稿 を参照してください。

フローの古いバージョンの場合、次の操作を実行できます。

import React from 'react';
import type { Children } from 'react';
type Props = {
  children?: Children,
};
const SampleText = (props: Props) => (
  <div>{props.children}</div>
);

いずれの場合も、childrenは nullable 型として宣言する必要があります。

彼らは繊維の到着とともにいくつかの部分を前進させるようです、彼らがそうすることを願っています！

github での議論に続いて

チートシート：http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/

27
locropulenton
type Text = string | number;
type Fragment = Iterable<Node>;
type ReactNode = React$Element<any>
  | Text
  | Fragment;

ReactNodeは子供のタイプである必要がありますが、エンプターに注意してください。

出典：フローリポジトリのいくつかのgithubの問題でこの構造を見たと思います。

0
Robert Balicki