如何只允许特定元素类型作为使用Flow和React的子元素？

Question

我正在尝试重现Flow文档中有关指定子prop的元素类型的步骤.这个例子是关于官方文档的.

我目前正在反应原生环境中测试它,使用:

• React Native(0.55.4)
• 反应(16.3.1)
• 流量(0.72.0)

我正在测试的代码是:

// @flow

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

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

const Item = () => <Text>Item</Text>

type Props = {
  children: React.ChildrenArray<React.Element<typeof Item>>,
}

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

export default () => (
  <View style={styles.container}>
    <Container>
      <Item />
      <View />
    </Container>
  </View>
)

预期的行为:从流中获取错误,因为我在View组件内部使用了一个Container组件,但我没有收到任何错误.

我也尝试过在try flow网站上只使用React的等效版本,但我也没有收到来自流程的错误:

/* @flow */

import * as React from 'react'

const Item = () => <span>Item</span>

type Props = {
  children: React.ChildrenArray<React.Element<typeof Item>>,
}

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

export default () => (
  <div>
    <Container>
      <Item />
      <Item />
      <span>Text</span>
    </Container>
  </div>
)

Answer 1

对我来说，使用“Container”作为类组件似乎可以工作

尝试 Flow 网站示例