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

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

将 Prop transformAnimation传递给transfrom {scale: this.props.transformAnimation }

子组件的子组件

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

并从状态 ProfileOffset 中删除，您在状态中不需要它。因为每次做出改变时，你都会从 parent 那里得到这个值(value)的 Prop 。

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