代码之家 › 专栏 › 技术社区 › Dan Rubio

这两个视图组件有什么区别?

react-vr react-native

0

Dan Rubio · 技术社区 · 6 年前

我正在查看react-360和react本机代码,并发现以下与 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>
    );
  }
}

为什么子视图组件是自动关闭的,而父视图组件不是。

2 回复 | 直到 6 年前

1

3

Nikhil Kinkar 6 年前

至于父母 <View> 不能使用自动关闭,因为它必须在开始和结束标记之间包装子组件。

如果是孩子 <查看& GT; 您没有在标记中包装任何子项,因此您使用的是“打开”选项和“自动关闭”选项。或分开结束标签。这就是 JSX公司 功能相同适用于所有标签,如 <div> , <p> 或其他自定义元素。

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

2

0

Luke Flournoy 6 年前

因为父视图组件有子组件,而子视图组件没有。请参阅此相关堆栈溢出问题:( React component closing tag )