Reactjs 仅将layout event.nativeEvent.layout.height从父组件传递到子组件会导致高度值无限增长

-如果您对代码进行了更改，请重新加载浏览器窗口并再次点击“点击播放”。我在组件内部做了一些注释来解释问题

以下是我的书面解释：

我的基本问题是：我想使两个兄弟组件具有相同的高度。一个同级（这里是SubComponent1）的内容是从数据库动态获取的，因此定义父级的高度。我希望它也定义子组件2的高度。如图所示：

我试图通过道具将父对象的高度发送给静态子对象（子组件2）来实现这一点。下面是父组件中的

渲染部分：

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

不会导致高度增加，我得到以下结果，您几乎看不到高度差
0.01
。然而，除以
1.001
再次导致无限循环。。。我真的无法解释为什么！以下是按
1.01下潜时的结果：

有人能解释这种奇怪的行为吗

我的问题有其他解决办法吗？
-在子组件2上设置
alignSelf:“拉伸”
也不起作用。
-将高度从一个兄弟发送到另一个兄弟（即从子组件1发送到子组件2）是否有帮助？如果是这样，我可能需要使用
Flux
模式实现一些东西，对吗？
首先不必明确定义高度。使用flexbox，实现您想要的目标应该很简单。只需将
flex:1
分配给两个子组件容器以及父组件容器，而父组件容器将添加一个
flex方向：“行”

为了举例说明，这里是我的意思的一个网络版本。您使用的不是
display:flex
，而是
flex:1
，但要点是相同的：
onLayout-您按setState放置新数据，这会导致新渲染（）和此处的问题

新的渲染导致新的onLayout=（悲伤，非常悲伤

它有一个大问题，所以可以使用例如this.dynamicSize=

取而代之的是setState（{dynamicSize:…}），但需要一些forceUpdate（），例如重新渲染，但再次-查看以防止循环

-在这里，您尝试了不同的方法来防止循环，但立即更新
，不幸的是，这没有帮助。我还认为这对于flexbox来说是一个微不足道的问题，但它不在react native中。我完全尝试了您所说的，但不起作用。我在我的问题中添加了一个代码链接。这里是链接
<View style={[styles.subComponent2View, {height: this.props.parentHeight}]}>

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