Question

我有一个组件会将required属性设置为其所有children，但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 repro，它返回的错误是：

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]

我知道设计并不是最好的，我可能应该使用渲染道具，但这是我尝试修复的一些旧代码，我无法更改API容易。

如何让Flow了解这段代码？

Answer 1

如果你必须传递一个React元素（例如<Bar />）而不是React组件（例如Bar），那么你已经实例化了没有所需道具的组件，因此Flow正确报告了错误。您需要更改界面以接受React.Component而不是React.Element来获得您想要的内容。

如何使Flow理解组件将通过cloneElement接收所需的道具？

1 个答案: