将 onLayout event.nativeEvent.layout.height 从父组件传递到子组件会导致高度值无限增长 [英] Passing onLayout event.nativeEvent.layout.height from parent to child component causes infinitely growing height value

问题描述

我尝试通过 props 将父组件的高度发送到静态子组件(子组件 2)来实现这一点.这是父组件中的 render 部分:

render: function() {返回 (<视图样式={styles.parentContainer} onLayout={this._onLayoutEvent}><Text>父组件</Text><子组件1/><SubComponent2 parentHeight={this.state.parentHeight}/></查看>);},_onLayoutEvent:函数(事件){this.setState({parentHeight: event.nativeEvent.layout.height});}

在这里我将它添加到孩子:

然而，这是行不通的！子组件的高度在无限循环中增加.. 参见图片:

出人意料地除以 1.01 使它工作！也就是把上面的子行改成

不会导致身高增长，我得到以下信息，您几乎看不到 0.01 的高度差异.然而除以 1.001 再次导致无限循环......我真的无法解释为什么！以下是通过 1.01 潜水时的结果:

有人可以解释这种奇怪的行为吗?

是否有其他解决方案可以解决我的问题?- 在 SubComponent2 上设置 alignSelf: 'stretch' 也不起作用.- 将高度从一个兄弟姐妹发送到另一个兄弟姐妹(即从子组件 1 到子组件 2)是否有帮助?如果是这样，我可能需要使用 Flux 模式来实现一些东西，对吗?

解决方案

onLayout - 你通过 setState 放置新数据，这会导致新的 render() 和这里的问题

新的渲染导致新的 onLayout！！！=(伤心，很伤心

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

改为 setState({dynamicSize: ...}) 但需要一些 forceUpdate() 例如重新渲染但再次 - 防止循环

https://facebook.github.io/react/docs/react-component.html - 在这里你尝试不同的方法来防止循环但立即更新

See the code in action on rnplay.org - if you make changes to the code, reload the browser window and hit "Tap to Play" again. I made some notes there inside the components to explain the problem.

Here my written explanation:

My basic problem: I want to make two sibling components the same height. The content of one sibling (here: SubComponent1) is dynamically fetched from the database and thus defines the height of the parent. I want it to also define the height of SubComponent 2. See image:

I tried to implement that by sending the height of the parent to the static child (SubComponent 2) via props. Here's the render part in the parent component:

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

And here I add it to the child:

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

However, this does not work! The SubComponent's height increases in an infinite loop.. see image:

Surprisingly dividing by 1.01 makes it work! That is, changing the above line in the child to

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

does not cause growing height and I get the following where you can barely see the height difference of 0.01. However dividing by 1.001 again causes the infinite loop... I really can't explain why! Here the result when diving by 1.01:

Can someone explain that strange behavior?

Are there alternative solutions to my problem? - Setting alignSelf: 'stretch' on SubComponent2 also does not work. - Would it perhaps help to send the height from the one sibling to the other (i.e. from SubComponent 1 to SubComponent2)? If so, I probably need to implement something using the Flux pattern, right?

解决方案

onLayout - you put new data by setState which cause new render() and here problem

New render cause new onLayout!!! =( sad, very sad

Had a big problem with it, so can use just e.g. this.dynamicSize = ...

instead setState({dynamicSize: ...}) but need some forceUpdate() for example to re-render but again - look to prevent loop

https://facebook.github.io/react/docs/react-component.html - here you try different methods to prevent the loop but update immediately

这篇关于将 onLayout event.nativeEvent.layout.height 从父组件传递到子组件会导致高度值无限增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！