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

Question

I have a child component where I have a button.

Now I have three of these child components placed next to each other in one Parent component.

Whenever any of these child comp is touched, I wish to change stuff in my parent component. So whenever the button is clicked, I wish to change state (or whatever is the way to do it) in parent and then go on and change the list that. I am loading in another child component used in parent. But when I press those buttons, my app just freezes after 3-4 clicks every time.

I thought maybe I am doing something very basic wrong. Like using the state/prop wrong and sending the app to infinite loop or something.

Parent Component:

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>

Child Component:

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

Is there anything I'm doing wrong or not the react way? (this is my First project with react)

I am also sometimes getting Possible EventEmitter memory leak detected warning in my metro bundler. When i check console, I see everything is getting re-rendered on every click, maybe that's making it so slow that it finally gives up?

Answer 1

一切看起来都不错，但是如果为孩子添加默认道具，其他开发人员将更容易理解。

Answer 2

I solved this problem, eventually. I was not using PureComponent for the header component that had a ticking clock. This made the header (with a few images inside) re-render entirely every second. As a result, JS frame rate for my app was dropping too low, hence the freezing.