Question

我试图重现有关指定子道具的元素类型的Flow文档的步骤。该示例位于官方docs。

我目前正在使用反应原生环境进行测试：

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>
)

预期行为：从流中获取错误，因为我在View组件中使用Container组件，但我没有收到任何错误。

我还在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

对我来说，它似乎使用“容器”作为类组件

Try Flow website example

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

1 个答案: