Reactjs 如何使Flow了解cloneElement将接收所需道具的组件？

我有一个组件，它将

required

属性设置为它的所有

子项

，但Flow似乎不理解它

// @flow
import * as React from 'react';

type BarProps = { required: 'defined' };
const Bar = ({ required }: BarProps) => <span />

type FooProps = { children: Array<React.Element<any>> };
const Foo = ({ children }: FooProps) =>
    React.Children.map(
      children,
      child => React.cloneElement(child, { required: 'defined' })
    );

<Foo children={[<Bar />]} />

/@flow
从“React”导入*作为React；
类型BarProps={required:'defined'}；
常量条=（{required}:BarProps）=>
类型FooProps={children:Array
^ [2]

我知道设计不是最好的，我可能应该使用渲染道具，但这是我试图修复的一些旧代码，我不能那么容易地更改API

---

如何使流程理解此代码？

如果必须传递一个React元素（例如

），而不是React组件（例如

条

），则您在没有所需道具的情况下实例化了组件，因此Flow正确地报告了一个错误。您需要将接口更改为接受

React.component

，而不是

React.Element

，以获得所需的内容。

change

typebarprops={required:'defined'}；

更改为

typebarprops={必需？：'defined'}；

14: <Foo children={[<Bar />]} />
                     ^ Cannot create `Bar` element because property `required` is missing in props [1] but exists in `BarProps` [2].
References:
14: <Foo children={[<Bar />]} />
                    ^ [1]
5: const Bar = ({ required }: BarProps) => <span />
                              ^ [2]