![](/img/trans.png)
[英]Communicate Between Components in React Native (child -> parent)
[英]What is the right way to communicate between child and parent component to change view content in Parent in react-native?
我有一个带有按钮的子组件。
现在,我在一个父级组件中将三个子级组件彼此相邻放置。
每当触摸这些子组件中的任何一个时,我都希望更改父组件中的内容。 因此,无论何时单击该按钮,我都希望更改父项的状态(或执行此操作的任何方式),然后继续进行操作,并更改其列表。 我正在加载用于父级的另一个子级组件。 但是,当我按下这些按钮时,我的应用程序每次都只有3-4次点击后冻结
我以为也许我在做一些非常基本的错误。 就像错误地使用状态/属性并将应用发送到无限循环之类。
父组件:
export default class Dash extends PureComponent {
constructor(){
super();
// Bind the this context to the handler function
this.state = {
activeAuctionsCount: 15,
wonAuctionsCount: 10,
convertedLeadsCount: 6,
isActiveAuctionsSelected: true,
iswonAuctionsSelected: false,
isconvertedLeadsSelected: false,
cardSelected: 'auctions', /* auctions/won/leads */
};
this.loadActiveAuctions = this.loadActiveAuctions.bind(this);
this.loadWonAuctions = this.loadWonAuctions.bind(this);
this.loadconvertedLeads = this.loadconvertedLeads.bind(this);
}
// This method will be sent to the child component
loadActiveAuctions() {
console.log('active pressed');
this.setState({
cardSelected: 'auctions'
});
}
loadWonAuctions() {
console.log('won pressed');
this.setState({
cardSelected: 'won'
});
}
loadconvertedLeads() {
console.log('leads pressed');
this.setState({
cardSelected: 'leads'
});
}
render() {
return (
<DealerShipDashStatsCard
statCardLayoutPath={statCardLeft}
statCardTitle={'NOW'+"\n"+'SHOWING'}
statValue={this.state.activeAuctionsCount}
isSelected={this.state.isActiveAuctionsSelected}
action={this.loadActiveAuctions}
/>
</View>
子组件:
export default class DealershipDash_StatsCard extends Component {
render() {
console.log("Rendering DashStat Card "+ this.props.statCardTitle);
return (
<ImageBackground
source={this.props.statCardLayoutPath}
style={styles.stat_card}
resizeMode="cover"
resizeMethod="resize">
<View style={styles.cardTop}></View>
<View style={styles.cardBottom}>
<View style={styles.cardStatTitle}>
<Text style={[styles.statTitleText]}>{this.props.statCardTitle}</Text>
</View>
<View style={styles.cardStatValue}>
<Text style={styles.cardStatValueText}>{this.props.statValue}</Text>
</View>
<View style={styles.cardButton}>
<Image
source={this.props.isSelected ? cardButtonActive : cardButtonInactive }
style = {this.props.isSelected ? styles.stat_card_button : styles.stat_card_button_inactive}/>
</View>
</View>
<Button onPress={this.props.action} title="press"/>
</ImageBackground>
);
}
}
我有做错什么还是没有反应的方法吗? (这是我的第一个反应项目)
有时我的地铁捆绑Possible EventEmitter memory leak detected
也可能收到“ Possible EventEmitter memory leak detected
警告”。 当我检查控制台时,我发现每次单击都重新呈现所有内容,也许这是如此之慢以至于最终放弃了?
一切看起来都不错,但是如果为孩子添加默认道具,其他开发人员将更容易理解。
我终于解决了这个问题。 我没有将PureComponent用于具有刻度时钟的标头组件。 这使得标头(其中包含一些图像)完全每秒重新呈现。 结果,我的应用程序的JS帧速率下降得太低,因此冻结了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.