React.Children.mapとReact.cloneElementを[email protected]で使用する方法

Question

親コンポーネントの子をNodeと入力した場合、childrenはReact.Children.mapに渡すタイプが間違っています。しかし、ChildrenArray<any>と入力すると、React.cloneElementに渡すタイプが間違っていると表示されます。

Scenario 1：

import * as React from 'react'; 

type Props = { 
    children?: React.ChildrenArray<any>, 
}; 

class Test extends React.Component<Props> { 
    props: Props; 

    render() { 
    return React.Children.map(this.props.children, child => 
     React.cloneElement(child, {}) 
    ); 
    } 
} 

<Test> 
    <span>foo</span> 
    <span>bar</span> 
</Test> 

Scenario 2：

import * as React from 'react'; 

type Props = { 
    children?: Node, 
}; 

class Test extends React.Component<Props> { 
    props: Props; 

    render() { 
    return React.Children.map(this.props.children, child => 
     React.cloneElement(child, {}) 
    ); 
    } 
} 

<Test> 
    <span>foo</span> 
    <span>bar</span> 
</Test> 

Answer 1

最初の例に問題がReact.ChildrenArray<any>の使用です。 ReactがNodeとして理解できる要素でなければならないので、そこに何かが使われることは実際にはありません。私がReact.ChildrenArray<*>からlet React infer the allowed typeに変更した場合、正常に動作しているようです。