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

Question

我正在尝试重现 Flow 文档中有关指定 Children 属性的元素类型的步骤。例子在官方上docs .

我目前正在 native react 环境中测试它，使用:

• React Native (0.55.4)
• react (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>
)

预期行为:从流程中收到错误，因为我在 Container 组件内使用 View 组件，但没有收到任何返回的错误。

我还在 try flow website 上尝试了仅使用 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”作为类组件似乎可以工作

Try Flow website example