Как передать родительское состояние дочерним компонентам - PullRequest
Новая
       18

Как передать родительское состояние дочерним компонентам

3 голосов
/ 25 марта 2019

По сути, я застрял при передаче состояния компонента родителя ребенку.У меня есть родительский компонент, который имеет слушателя динамического смещения содержимого, поэтому, если я прокручиваю вниз или вверх, он обновляет состояние с этим значением смещения.У меня также есть дочерний компонент, и внутри этого дочернего компонента у меня есть другой дочерний компонент (для более удобной навигации по коду).

Это родительский компонент.Я проверил, и состояние обновляется всякий раз, когда происходит прокрутка.

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

Мне нужно передать состояние для анимации компонента внутри дочернего компонента этого ребенка.

1 Ответ

1 голос
/ 25 марта 2019

Передать реквизиты 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, если он вам не нужен в состоянии.Потому что вы получаете в качестве реквизита от родителя это значение - каждый раз, когда вносятся изменения.

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