如何将 parent 的状态传递给 children 组件

Question

基本上，我无法将 parent 的组件状态传递给 child。我有一个 parent 组件，它有一个动态内容偏移侦听器，所以如果我向下或向上滚动，它会用这个偏移值更新状态。我还有一个 child 组件，在那个 child 组件中我有另一个 child 组件（为了更容易地浏览代码）。

那是 parent 组件。我检查过，只要滚动发生，状态就会更新。

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

Child分量

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

Child 的 child 分量

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

我需要传递状态来为 child 的 child 组件内的组件设置动画。

Answer 1

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

Child 的 child 分量

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

并从状态 ProfileOffset 中删除您不需要的状态。因为你从 parent 中获得了这个值——每次进行更改时。

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

如何将 parent 的状态传递给 children 组件

How to pass parent's state to children components

state

reactjs

react-native

react-native-ios