Как отправить или передать состояние от братьев и сестер, чтобы братья и сестры реагировать на родной? - PullRequest
Новая
       31

Как отправить или передать состояние от братьев и сестер, чтобы братья и сестры реагировать на родной?

0 голосов
/ 29 мая 2019

Я создаю Boilerplate в реагировать родной. когда у меня есть родительский компонент и компоненты childs, и я хочу перенести состояние из дочернего 1 в дочернее 2

Я пытаюсь отправить родителю потом children2, но не работает

Это мой код Родитель 

class WashingPackageMotor extends Component {
render() {
    return (
      <View style={styles.containerMain}>
        <Grid scrollable>
          <Section>
            <Block size="100%">
              <ComponentWashingPackage />
            </Block>
          </Section>
          <Section>
            <Block size="100%">
              <ComponentList />
            </Block>
          </Section>
        </Grid>
        <Grid>
          <Section>
            <Block size="100%">
              <ComponentBottom />
            </Block>
          </Section>
        </Grid>
      </View>
}
    );
  }
}

Ребенок 1 (один брат) 

export default class ComponentList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 0,
            amount: 0,
            v0: 0,
            v1: 0,
            collapsed: false
            // v5: 0,
            // v6: 0
        }
        this.amount = 0
    }
..........
..........
}

Ребенок 2 (Брат и сестра два) 

class ComponentBottom extends Component {
  render() {
    return (
      <Grid>
        <View style={styles.bottomView}>
          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth:0.5}}/>
          <Section>
            <Block size="60%">
              <Text style={styles.textHarga}>Total Harga</Text>
              <Text style={styles.textPrice}>Rp 180.000</Text>
            </Block>
            <Block size="40%">
              <ButtonProcessDisabled onPress={() => this.props.navigation.navigate('OrderConfirmation')}/>
            </Block>
          </Section>
        </View>
      </Grid>
    )
  }
}

И как отправить состояние от Ребенка 1 (Брат 1) к Ребенку 2 (Брат 2)

1 Ответ

0 голосов
/ 29 мая 2019

Шаги, чтобы получить желаемую функциональность (не рекомендуется, хотя использовать редукс или контекст):

Родитель: 

class WashingPackageMotor extends Component {
    constructor(props) {
        super(props);
        this.state = {
            amount: "",
        }
    }

    update(amount) {
        this.setState({amount});
    }

    render() {
        return (
          <View style={styles.containerMain}>
            <Grid scrollable>
              <Section>
                <Block size="100%">
                  <ComponentWashingPackage />
                </Block>
              </Section>
              <Section>
                <Block size="100%">
                  <ComponentList
                     amount={this.state.amount} 
                     updateAmount={amount => this.update(amount)}
                  />
                </Block>
              </Section>
            </Grid>
            <Grid>
              <Section>
                <Block size="100%">
                  <ComponentBottom 
                    amount={this.state.amount}
                  />
                </Block>
              </Section>
            </Grid>
          </View>
    }
        );
      }
    }

Child1:

всякий раз, когда вы хотитеДля обновления состояния просто вызовите функцию this.props.updateAmount(valueHere);

export default class ComponentList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 0,
            amount: this.props.amount,
            v0: 0,
            v1: 0,
            collapsed: false
            // v5: 0,
            // v6: 0
        }
        this.amount = 0
    }
..........
..........
}

child 2: 

class ComponentBottom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      amount: this.props.amount,
    };
  }
  render() {
    return (
      <Grid>
        <View style={styles.bottomView}>
          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth:0.5}}/>
          <Section>
            <Block size="60%">
              <Text style={styles.textHarga}>Total Harga</Text>
              <Text style={styles.textPrice}>Rp 180.000</Text>
            </Block>
            <Block size="40%">
              <ButtonProcessDisabled onPress={() => this.props.navigation.navigate('OrderConfirmation')}/>
            </Block>
          </Section>
        </View>
      </Grid>
    )
  }
}

ПРИМЕЧАНИЕ. Вам нужно будет использовать componentWillReceiveProps() для версии реакции старше 16,3а для вышеперечисленного вам нужно будет использовать getDerivedStateFromProps для обновления состояния на основе обновленных реквизитов.

...