如何用Flow和React限制组件仅接受特定类型子元素？

我之前也遇到过这个一模一样的问题！你用的Flow 0.72.0版本比较老，官方文档里的写法在这个版本里确实不会触发预期的报错，得调整一下类型定义的方式才能让Flow正确检查子元素类型。

问题根源 #

在Flow 0.72.0这类旧版本中，React.ChildrenArray<T>的类型约束不够严格，而且如果不对目标组件（比如你的Item）明确标注类型，Flow无法精准推断React.Element<typeof Item>的具体类型，导致不匹配的子组件（比如View或span）无法被检测出来。

正确实现方式 #

步骤1：给目标组件明确标注类型 #

首先，给你想要限制的Item组件加上React.ComponentType的类型注解，让Flow能准确识别它的组件类型：

// React Native 示例
const Item: React.ComponentType<{}> = () => <Text>Item</Text>

// 纯React示例
const Item: React.ComponentType<{}> = () => <span>Item</span>

步骤2：修改Props的children类型定义 #

把原来的React.ChildrenArray<React.Element<typeof Item>>替换成更精确的类型，直接指定子元素为单个Item组件或其只读数组：

type Props = {
  children: React.Element<typeof Item> | $ReadOnlyArray<React.Element<typeof Item>>,
}

完整测试代码（React Native版本） #

// @flow
import * as React from 'react'
import { StyleSheet, View, Text } from 'react-native'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

// 明确标注Item的组件类型
const Item: React.ComponentType<{}> = () => <Text>Item</Text>

type Props = {
  children: React.Element<typeof Item> | $ReadOnlyArray<React.Element<typeof Item>>,
}

const Container = (props: Props) => <View>{props.children}</View>

export default () => (
  <View style={styles.container}>
    <Container>
      <Item />
      <View /> {/* 这里Flow会抛出类型不匹配的错误，符合预期 */}
    </Container>
  </View>
)

完整测试代码（纯React版本） #

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

// 明确标注Item的组件类型
const Item: React.ComponentType<{}> = () => <span>Item</span>

type Props = {
  children: React.Element<typeof Item> | $ReadOnlyArray<React.Element<typeof Item>>,
}

const Container = (props: Props) => <div>{props.children}</div>

export default () => (
  <div>
    <Container>
      <Item />
      <Item />
      <span>Text</span> {/* 这里Flow会抛出类型不匹配的错误，符合预期 */}
    </Container>
  </div>
)

额外说明 #

如果后续你能升级到Flow 0.100+的版本，官方文档里的React.ChildrenArray<React.Element<typeof Item>>写法就能正常工作了。但考虑到你当前使用的React Native 0.55.4对新版本Flow可能有兼容性问题，上面的适配写法是更稳妥的选择。

内容的提问来源于stack exchange，提问作者Andrio Renan Gonzatti Frizon