如何让Flow满意React.cloneElement和接受不同道具的孩子？

Question

设置

假设您有Menu React组件，其中只有Item或ItemGroup组件作为子组件。

type MenuChild = React.Element<typeof Item> | React.Element<typeof ItemGroup>

type Props = {
  children: React.ChildrenArray<MenuChild>
}

class Menu extends React.PureComponent<Props> {
  // ...
}

Item和ItemGroup接受不同的属性。

class Item extends React.PureComponent<{href: string}> {
  // ...
}

class ItemGroup extends React.PureComponent<{}> {
  // ...
}

渲染时，Menu会在每个孩子身上使用React.cloneElement。

render () {
  return <div>
    {React.Children.map(
      this.props.children,
      item => React.cloneElement(item)
    )}
  </div>
}

您可以在此处查看完整代码：https://github.com/bjohn465/flow-clone-element-test/blob/1576bf1bc4ee1f4ba6a697b0db2a526afacb33fb/index.js

问题

当在接受不同道具的组件上使用React.cloneElement时，流似乎有问题。我不确定为什么。

这是一个示例错误（不同版本的Flow会产生不同的错误）：

Error: index.js:28
 28:         item => React.cloneElement(item)
                     ^^^^^^^^^^^^^^^^^^^^^^^^ call of method `cloneElement`
  5: class Item extends React.PureComponent<{href: string}> {
                                            ^^^^^^^^^^^^^^ property `href`. Property not found in
 11: class ItemGroup extends React.PureComponent<{}> {
                                                 ^^ object type

如何在此实例中使用React.cloneElement，但仍然保持Flow快乐？

Answer 1

似乎已在Flow 0.66.0及更高版本中修复此问题，因为示例代码在这些版本中不再出错。

在0.66.0之前的版本中，我发现解决此问题的唯一方法是将item中的React.cloneElement(item)强制转换为any。