Как отправить или передать состояние от братьев и сестер к братьям и сестрам в React Native?

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

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

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

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)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Родитель:

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

Ребенок1:

всякий раз, когда вы хотите обновить состояние, просто вызовите функцию 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
    }
..........
..........
}

ребенок 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 для обновления состояния на основе обновленных реквизитов.

если я хочу отправить состояние v0: 0, что я должен сделать, можете ли вы дать мне подробную информацию, когда я хочу отправить v0: 0. Спасибо

zidniryi 29.05.2019 12:28

Просто используйте то же состояние в родительском элементе, что и сумма, и создайте другую функцию для его обновления в родительском элементе. Также передайте его дочерним компонентам через реквизит.

Yash Thakur 29.05.2019 22:32

Другие вопросы по теме