Я создаю 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)
Шаги для получения желаемой функциональности (не рекомендуется, хотя лучше используйте сокращение или контекст):
Родитель:
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. Спасибо