flowtype – React.cloneElement Inexact类型与确切类型不兼容

发布时间：2020-12-15 09:30:46 所属栏目：百科来源：网络整理

导读：使用React.cloneElement会导致类型错误,我似乎无法解决. class Dropdown extends React.Component{ children?: React.ChildrenArrayReact.Elementtypeof Item } { render() { React.Children.map(this.props.children,child = React.cloneElement(child) );

使用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结合使用的正确方法.

解决方法

我不确定您使用的是哪个版本的流程,而且我没有< Item>的功能定义,但是当您删除？时它似乎有用？来自儿童,因此需要阵列：

//@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,所以尝试“尝试流程”,这里：
https://flow.org/try/#0PTACDMBsHsHcCgCWBbADtATgFwAQCocBDAZxwCUBTQgY13A2mRwHIMrbn55roA7Y3AEksFJgF4cACgCUOMQD4WACwqQYOWJkgATTt0glSAEQaptcXjgoAPEb22lKNLADoAwo3S8KvLAB4AbxxqJUQdNl4ALnJ2VzdQ8J8AQQwMQgBPPydaFwBRSFEffyx01ApocBxhUXlFAF9FAPgcFpaI7QoMGRwm1r6W7LiE7QiXZEJUSSxQ4hdUU1mQsJGfABpg4blFZv7dmOcXahhvfMLfSSWdaR296QBuG5a6+DqgA

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!