flowtype - React.cloneElement 不精确类型与精确类型不兼容

Question

使用 React.cloneElement 会导致我似乎无法解决的类型错误。

class Dropdown extends React.Component<{ children?: React.ChildrenArray<React.Element<typeof Item>> }> {
     render() {
         React.Children.map(this.props.children, child => 
             React.cloneElement(child)
         );
     }
}

以下类型错误:

91:         React.cloneElement(child, {
                            ^^^^^ read-only array type. Inexact type is incompatible with exact type
            v--------------------------
91:         React.cloneElement(child, {
92:           onClick: () => this.setState({ open: false }),
93:         }),
           -^ exact type: object type

据我所知，这是将 React.Children 与 React.cloneElement 结合使用的正确方法。

Answer 1

我不确定您使用的是哪个版本的流，而且我没有 <Item> 的函数定义，但是当您删除 ? 时它似乎可以工作来自 child ，因此需要数组:

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

const Item = () => 'hello world'

class Dropdown extends React.Component<{ children: React.ChildrenArray<React.Element<typeof Item>> }> {
     render() {
         React.Children.map(this.props.children, child => 
             React.cloneElement(child)
         );
     }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

SO 编辑器似乎不喜欢 Flow，因此请在此处尝试“尝试 Flow”:
https://flow.org/try/#0PTACDMBsHsHcCgCWBbADtATgFwAQCocBDAZxwCUBTQgY13A2mRwHIMrbn55roA7Y3AEksFJgF4cACgCUOMQD4WACwqQYOWJkgATTt0glSAEQaptcXjgoAPEb22lKNLADoAwo3S8KvLAB4AbxxqJUQdNl4ALnJ2VzdQ8J8AQQwMQgBPPydaFwBRSFEffyx01ApocBxhUXlFAF9FAPgcFpaI7QoMGRwm1r6W7LiE7QiXZEJUSSxQ4hdUU1mQsJGfABpg4blFZv7dmOcXahhvfMLfSSWdaR296QBuG5a6+DqgA