Access Eltern Prop von Kind

Question

Ich versuche, einen einfachen Router auf einer Seite zu implementieren. Ich habe eine Elternklasse, die steuert, welche Ansicht geladen wird HutDBStatsRouter und 2 Kindklassen HutDBStats und HutDBPlayerView. HutDBStats enthält eine ListView mit einer TouchableOpacity, die, wenn sie angeklickt wird, HutDBPlayerView rendern muss. Ich stoße auf ein Problem, das ich glaube, weil HutDBStats seine eigenen Requisiten hat, aber ich kann nicht herausfinden, wie man es richtig an die Elternklasse HutDBStatsRouter weitergibt.

Für Testzwecke habe ich das gleiche Szenario in HutDBPlayerView eingerichtet und es HutDBStats (es hat gut funktioniert), aber es funktioniert nicht, wenn ich HutDBStats habe versuchen, HutDBPlayerView zu rendern.

Der Code ist ziemlich groß, also habe ich keine unnötigen Informationen ausgeschnitten. Der Fehler, den ich erhalte, ist kann die Eigenschaft 'changeComponent' von undefined nicht lesen.

export default class HutDBStatsRouter extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      componentSelected: 'One', 
     } 
    } 
    changeComponent = (component) =>{ 
     this.setState({componentSelected: component}); 
    } 
    renderComponent(component) { 
     if(component == 'Two') { 
      return <HutDBStats changeComponent={this.changeComponent} /> 
     } else if(component == 'One') { 
      return <HutDBPlayerView changeComponent={this.changeComponent} /> 
     } 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       {this.renderComponent(this.state.componentSelected)} 
      </View> 
     ); 
    } 
} 

class HutDBPlayerView extends Component { 
    render() { 
     return (
      <View> 
       <TouchableOpacity onPress={() => this.props.changeComponent('Two') }> 
        <Text>Go back to ListView</Text> 
       </TouchableOpacity> 
      </View> 
     ); 
    } 
} 

class HutDBStats extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      source  : [], 
      dataSource : new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), 
      loaded  : false, 
      page  : PAGE_LOAD_AMT, 
      search  : '', 
     }; 
    } 

    componentDidMount() { 
     this.fetchData(API_PATH + '&page=0',true, false); 
    } 

    ....... 
    ....... 

    renderList(d) { 
     return (
      <TouchableOpacity onPress={() => this.props.changeComponent('Two') }> 
       ... 
       </TouchableOpacity> 
     ); 
    } 
} 

Jede Hilfe wird sehr geschätzt. Ich bin sehr neu zu reagieren-native.

Answer 1

Das Problem könnte sein, dass der Konstruktor in HutDBPlayerView fehlt.

class HutDBPlayerView extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
    } 
 
    render() { 
 
     return (
 
      <View> 
 
       <TouchableOpacity onPress={() => this.props.changeComponent('Two') }> 
 
        <Text>Go back to ListView</Text> 
 
       </TouchableOpacity> 
 
      </View> 
 
     ); 
 
    } 
 
}

Wenn Sie dies beabsichtigen, eine stateless Komponente zu sein, können Sie es sogar wie so Code:

function HutDBPlayerView (props){ 
 
    return (
 
     <View> 
 
      <TouchableOpacity onPress={() => props.changeComponent('Two') }> 
 
       <Text>Go back to ListView</Text> 
 
      </TouchableOpacity> 
 
     </View> 
 
); 
 
}