如何将 React.Children.map 与 React.cloneElement 与 flow@0.53.0 一起使用答案

【问题标题】：How to use React.Children.map with React.cloneElement with flow@0.53.0如何将 React.Children.map 与 React.cloneElement 与 flow@0.53.0 一起使用
【发布时间】：2017-08-22 23:51:21
【问题描述】：

如果我将父组件的子组件键入为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>

【问题讨论】：

您的第一个示例错误仅包含 flow.org/try/…，但通过 flow.org/try/… 传递，所以肯定看起来很奇怪。

标签： reactjs flowtype

【解决方案1】：

第一个例子的问题是React.ChildrenArray<any>的使用。并不是真的可以在那里使用任何东西，因为它们必须是 React 可以理解为节点的元素。如果我将其更改为 React.ChildrenArray<*> 到 let React infer the allowed type，它似乎工作正常。

【讨论】：