Question

我有一个子组件，我有一个按钮。

现在，我将其中三个子组件放在一个父组件中。

每当触及任何这些子comp时，我希望更改父组件中的内容。因此，无论何时单击按钮，我希望在父级中更改状态（或任何方式），然后继续并更改列表。我正在加载父母中使用的另一个子组件。但是当我按下这些按钮时，我的应用程序每次点击3-4次后就会冻结。

我想也许我在做一些非常基本的错误。就像使用state / prop错误并将应用程序发送到无限循环或其他东西一样。

父组件：

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警告。当我检查控制台时，我发现每次点击都会重新渲染所有内容，也许这会让它变得如此之慢以至于最终放弃了？

Answer 1

每件事看起来都不错，但是如果你为孩子添加默认道具，那么对于其他开发者来说它会更具可读性。

Answer 2

我最终解决了这个问题。我没有使用PureComponent作为具有滴答时钟的标头组件。这使得标题（内部有一些图像）完全每秒重新渲染。结果，我的应用程序的JS frame rate下降得太低，因此冻结了。

什么是在子组件和父组件之间进行通信以在react-native中更改父组件中的视图内容的正确方法？

2 个答案: