В чем разница между этими двумя компонентами View?

Question

Я смотрю на код реагирования-360 и собственный код реакции и нашел следующие примеры, касающиеся компонента 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 в глубине

Answer 2

Поскольку родительский компонент View имеет дочерние компоненты, а дочерние компоненты View - нет.См. Этот связанный вопрос переполнения стека: ( Реагирующий закрывающий тег компонента )