儿童反应元素的流式注释

时间:2016-11-17 09:29:27

标签: javascript reactjs flowtype

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

3 个答案:

答案 0 :(得分:27)

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

import * as React from 'react';

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

更多信息请参阅official docs或以下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

中讨论之后

备忘单: http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/

答案 1 :(得分:8)

它看起来并不像。

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

答案 2 :(得分:0)

sandbox.cpp:1:23: fatal error: glad/glad.h: No such file or directory
#include <glad/glad.h>
                   ^
compilation terminated.

type Text = string | number; type Fragment = Iterable<Node>; type ReactNode = React$Element<any> | Text | Fragment; 应该是孩子的类型,但需要注意。

资料来源:我相信,在流动回购的一些github问题上,我已经看到了这种结构。