子反应元素的流类型注释

Question

是否有更好的类型注释方法 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>
  );
};

Answer 1

看起来不像。

来自官方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>;

Answer 2

Flow v0.53 支持 children 开箱即用！！

import * as React from 'react';

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

阅读 official docs or the following blog post 了解更多信息。

对于旧版本 的流程，您可以执行以下操作：

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

任何一种情况 children 都应声明为 nullable 类型。

看起来他们会随着光纤的到来而向前推进一些，希望他们这样做！

根据 github

中的讨论

作弊sheet:http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/

Answer 3

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

ReactNode 应该是 children 的类型，但买者自负。

来源：我相信我在 flow repo 的一些 github issues 中看到了这种结构。

子反应元素的流类型注释

flow type annotation for children react elements

javascript

reactjs

flowtype