Question

基本上，我被困在将父级的组件状态传递给孩子的过程中。我有一个具有动态内容偏移侦听器的父组件，因此如果向下滚动或向上滚动，它将使用此偏移值更新状态。我还拥有一个子组件，在该子组件中，我还有另一个子组件（为了更轻松地浏览代码）。

那是父组件。我检查了一下，只要滚动发生，状态就会更新。

constructor(props) {
super(props);
this.state = {
  contentOffset: 1
}
this.onScrollEvent = this.onScrollEvent.bind(this);
}


onScrollEvent = event => {
this.setState(
  {
    contentOffset: event.nativeEvent.contentOffset.y,
  }
)
}               
render() { 
   return (                                        
   <ScrollView 
    showsVerticalScrollIndicator={false}
    onScroll={this.onScrollEvent.bind(this)>
       <ChildOne
          animation={this.state.contentOffset}/>
   );
 }

子组件

constructor(props) {
    super(props);
}
render() { 
   return (   
   <NestedChild 
            handleClick={this.openSettingsInHeader} 
            header="What the..."
            transformAnimation={this.props.animation}/>
   );
 }

孩子的孩子组成部分

constructor(props) {
    super(props);
    this.state = {
        AnimatedTextValue: new Animated.Value(0),
        ProfileOffset: this.props.transformAnimation
    }
}

render() { 

   const animatedStyles = {
        transform: [
          { scale: 0 }]} //how to link the AnimatedTextValue to ProfileOffset? 
   return (   
   <Animated.Text style={[styles.nameStyle,animatedStyles]}>Hi!</Animated.Text>
   );
 }

我需要传递状态以对该孩子的子组件中的组件进行动画处理。

Answer 1

将道具transformAnimation传递到{ scale: this.props.transformAnimation }的转场点

孩子的孩子组成部分

render() { 
   const animatedStyles = {
        transform: [
          { scale: this.props.transformAnimation }]} // <<====  
   return (   
   <Animated.Text style={[styles.nameStyle,animatedStyles]}>Hi!</Animated.Text>
   );
 }

并从状态ProfileOffset中删除您不需要该状态。每次更改时，您都会从父级获得作为价值的道具。

 this.state = {
    AnimatedTextValue: new Animated.Value(0),
    ProfileOffset: this.props.transformAnimation   // <==== remove this
}

如何将父级的状态传递给子级组件

1 个答案: