Передача onLayout event.nativeEvent.layout.height от родительского компонента к дочернему компоненту вызывает бесконечно растущее значение высоты

Question

See the code in action on rnplay.org - если вы вносите изменения в код, перезагрузите окно браузера и снова нажмите «Tap to Play». Я сделал некоторые заметки внутри компонентов, чтобы объяснить проблему.

Вот мое письменное объяснение:

Моя основная проблема: Я хочу сделать две компоненты одноуровневые той же высоте. Содержимое одного брата (здесь: SubComponent1) динамически извлекается из базы данных и, таким образом, определяет высоту родителя. Я хочу, чтобы также определить высоту подкомпоненте 2. См изображения:

Я пытался осуществить что, посылая высоту родителя к статическому ребенку (подкомпонент 2) с помощью реквизита. Вот render часть в родительском компоненте:

render: function() { 
    return (
    <View style={styles.parentContainer} onLayout={this._onLayoutEvent}> 
     <Text>Parent Component </Text> 
     <SubComponent1 /> 
     <SubComponent2 parentHeight={this.state.parentHeight} /> 
    </View> 
); 
}, 

_onLayoutEvent: function(event) { 
    this.setState({parentHeight: event.nativeEvent.layout.height}); 
} 

И здесь я добавляю его к ребенку:

<View style={[styles.subComponent2View, {height: this.props.parentHeight}]}> 

Однако, это не работает! Высота SubComponent возрастает в бесконечном цикле. См. Изображение:

Удивительно делясь на 1.01, заставляет его работать! То есть, изменение выше линий в ребенке

<View style={[styles.subComponent2View, {height: this.props.parentHeight/1.01}]}> 

не вызывает растущую высоту и я получаю следующую команду, где едва можно увидеть разницу по высоте 0.01. Однако деление на 1.001 снова вызывает бесконечный цикл ... Я действительно не могу объяснить, почему! Здесь результат при погружении на 1.01:

Может кто-нибудь объяснить это странное поведение?

Есть ли альтернативные решения моей проблемы? - Установка alignSelf: 'stretch' на SubComponent2 тоже не работает. - Возможно, это поможет отправить высоту от одного брата к другому (т. Е. От SubComponent 1 до SubComponent2)? Если это так, мне, вероятно, нужно что-то реализовать, используя шаблон Flux, верно?

Answer 1

Вам не обязательно определять высоту явно в первую очередь. С flexbox это должно быть тривиально для достижения того, что вы ищете. Просто назначьте flex: 1 как контейнерам дочерних компонентов, так и родительским элементам, в то время как родитель будет иметь добавление flex-direction: 'row'.

Чтобы проиллюстрировать, вот веб-версия, что я имею в виду. Вместо display: flex вы используете flex: 1 но суть та же: https://jsfiddle.net/2rc4b2qy/

Answer 2

OnLayout - вы поставили новые данные по SetState, которые вызывают новые визуализации() и здесь проблемы

Новые визуализации вызывают новый OnLayout !!! = (Грустно, очень грустно

Если бы большие проблемы с ним, так что можно использовать только например this.dynamicSize = ...

вместо SetState ({dynamicSize: ...}), Но нуждаются в forceUpdate(), например, чтобы вновь сделать, но опять же - смотрите, чтобы предотвратить петлю

https://facebook.github.io/react/docs/react-component.html - здесь вы попробовать различные методы, чтобы предотвратить цикл, но обновление немедленно