Question

我正在查看react-360和react-native代码，并发现了以下与View组件有关的示例。

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View style={{flexDirection: 'row', height: 100, padding: 20}}>
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
        <View style={{backgroundColor: 'red', flex: 0.5}} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

为什么子级View组件会自行关闭，而父级View组件却不会自动关闭。

Answer 1

对于父级<View>，您不能使用自闭包，因为它必须在开始和结束标记之间包装子组件。

对于子项<View>，您不会在标签内包装任何子项，因此您使用open时可以选择使用自闭合或单独的结束标签。 JSX 功能同样适用于所有标记，例如<div>，<p>或其他自定义元素。

您可以更深入地了解它JSX in Depth

Answer 2

因为父级View组件具有子级组件，而子级View组件却没有。请参阅以下相关的堆栈溢出问题：（React component closing tag）

这两个View组件有什么区别？

2 个答案: