如何在 React Native 中将状态从兄弟姐妹发送或传递给兄弟姐妹?
How to send or passing state from siblings to siblings in react native?
我在 React Native 中创建了一个样板。当我有 parent 并且必须 child 的组件并且我想要从 child 1 到 child 2
的状态时
我试过发送到 parent 然后 children2 但没用
这是我的代码
Parent
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>
}
);
}
}
Child 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
}
..........
..........
}
Child 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>
)
}
}
以及如何将状态从 Child 1 (Sibling 1) 发送到 Child 2 (Sibling2)
获得所需功能的步骤(不建议使用 redux 或 context):
Parent:
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
}
..........
..........
}
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>
)
}
}
注意:对于早于 16.3 的 React 版本,您需要使用 componentWillReceiveProps()
,对于高于 16.3 的版本,您需要使用 getDerivedStateFromProps
来根据更新的道具更新状态.
我在 React Native 中创建了一个样板。当我有 parent 并且必须 child 的组件并且我想要从 child 1 到 child 2
的状态时我试过发送到 parent 然后 children2 但没用
这是我的代码 Parent
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>
}
);
}
}
Child 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
}
..........
..........
}
Child 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>
)
}
}
以及如何将状态从 Child 1 (Sibling 1) 发送到 Child 2 (Sibling2)
获得所需功能的步骤(不建议使用 redux 或 context):
Parent:
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
}
..........
..........
}
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>
)
}
}
注意:对于早于 16.3 的 React 版本,您需要使用 componentWillReceiveProps()
,对于高于 16.3 的版本,您需要使用 getDerivedStateFromProps
来根据更新的道具更新状态.