Wie initialisiere ich immer die Stütze dieser reactjs Komponente?

Question

I verwendet react-router die folgenden Routen zu definieren:

<Route 
    path="/plan" 
    components={App} 
> 
    <Route 
    path="try/:planCategory" 
    components={PlanTrialContainer} 
    /> 
    <Route 
    path="pay/:planCategory" 
    components={PlanPurchaseContainer} 
    /> 
</Route> 

Die Idee ist, dass: wenn eine URL Benutzer besucht /plan er einen Plan über diesen Standard sehen werden, sonst wird der Inhalt von try/... oder pay/...

entschieden werden Hier

ist die App Klasse

import React, { Component } from 'react'; 
import { Menu } from './Menu'; 
import PlansOverviewContainer from './PlansOverviewContainer'; 

export default class App extends Component { 
    render() { 
    const { children } = this.props.children; 

    let component = null; 
    if (children) { 
     component = children; 
    } else { 
     component = PlansOverviewContainer; 
    } 

    return (
     <div> 
     <Menu /> 
     {component} 
     </div> 
    ); 
    } 
} 

ich werde diese Fehlermeldung erhalten, wenn ich dieversuchen

TypeError: Cannot read property 'children' of null 
App.render 
/Users/antkong/dev/myproject/plan/app/scripts/components/App.js 

Wenn ich die Linie von

const { children } = this.props.children; 

zu

const children = this.props ? this.props.children : null; 

Es funktioniert wird sich ändern.

Allerdings ist meine bevorzugte Version die erste Version, d. H. this.props sollte egal was initialisiert werden. Wie kann ich sicherstellen, dass prop initialisiert ist? Gibt es einen Parameter für die Router Komponente, die ich verwenden kann?

Answer 1

Du Destrukturierung Kinder aus this.props.children die wie versuche zu tun: this.props.children.children

Statt es zu ändern:

const { children } = this.props;

Answer 2

Sie müssen wie so die Super-Klassen initializer nennen:

import React, { Component } from 'react'; 
import { Menu } from './Menu'; 
import PlansOverviewContainer from './PlansOverviewContainer'; 

export default class App extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { children } = this.props.children; 

    let component = null; 
    if (children) { 
     component = children; 
    } else { 
     component = PlansOverviewContainer; 
    } 

    return (
     <div> 
     <Menu /> 
     {component} 
     </div> 
    ); 
    } 
}