このreactjsコンポーネントの小道具をいつも初期化するには？

Question

私は、次のルートを定義するためにreact-routerを使用：

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

アイデアがあることである：ときに、ユーザの訪問のURL /plan、彼はそうでないコンテンツがtry/...またはpay/...

によって決定されますが、デフォルトでは計画の概要が表示されますここで

Appクラスは、私がをしようとすると、私は、このエラーメッセージが表示されます

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

です

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

私は

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

に

const { children } = this.props.children; 

から行を変更した場合は動作します。

私の推奨バージョンは最初のバージョンです。すなわち、this.propsは何を問わず初期化する必要があります。 propをどのように初期化することができますか？私が使用できるコンポーネントはRouterですか？

Answer 1

あなたがやろうとしているようなものですthis.props.childrenから子供構造化代入されます。

：代わりにそれを変更 this.props.children.children

を

const { children } = this.props;

Answer 2

あなたがそうのようなスーパークラス初期化子を呼び出す必要があります：

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