陣營this.props.children是不確定的

Question

我有以下的路由器配置：

ReactDOM.render((
    <Router history={History.createHistory()}> 
    <Route path="/" component={Page}> 
     <IndexRoute component={OverviewDashboard}/> 
     <Route path="/:env" component={Env}> 
     <IndexRoute component={EnvOverview}/> 
     </Route> 
    </Route> 
    </Router> 
), document.getElementById('page')); 

及以下組件定義：

const Page = React.createClass({ 
    render: function() { 
    return (
     <main> 
     <Header /> 
     {this.props.children} 
     </main> 
    ); 
    } 
}); 

const OverviewDashboard = React.createClass({ 
    render: function() { 
    return (
     <section> 
     <Env name="Env1" /> 
     <Env name="Env2" /> 
     </section> 
    ); 
    } 
}); 

const Env = React.createClass({ 
    render: function() { 
    return (
     <section className="env"> 
     <header>{this.props.params && this.props.params.env || this.props.name}</header> 
     {this.props.children} 
     </section> 
    ); 
    } 
}); 

const EnvOverview = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <Jobs env={this.props.params.env}/> 
     <Runtime env={this.props.params.env}/> 
     </div> 
    ) 
    } 
}); 

我ommitted的<Header>, <Jobs>的定義和<Runtime>因爲他們不相關。

當我去/鏈接{this.props.children}在<Env>組件未定義，因此不呈現。

但是，當我去「/ Env1」{this.props.children}設置爲<EnvOverview>正確並顯示。

我是新來的React，可能我錯誤地使用了路由組件。有人可以解釋如何在訪問/鏈接時呈現<EnvOverivew>？

Answer 1

當您轉到/Env時，react-router呈現您的/:env路由，其組件是Env。在此路線內，您有一個IndexRoute。此IndexRoute呈現EnvOverview組件作爲其父路由子項。因此，您在這種情況下獲得{this.props.children}。

當您輸入/路線時，它會觸發您的IndexRoute在App的內部，其組件爲OverviewDashboard。它不會輸入/:env路線，因爲您沒有提供與:env匹配的參數。

在您的OverviewDashboard裏面，您手動呈現兩個Envs，而不提供他們的子女（check this）。因此，在這兩個Envs中，{this.props.children}等於undefined。

我不知道你的要求是什麼，但你可以改變OverviewDashboard渲染方法是：

render: function() { 
    return (
    <section> 
     <Env name="Env1"><EnvOverview name="Env1" /></Env> 
     <Env name="Env2"><EnvOverview name="Env2" /></Env> 
    </section> 
); 
} 

而且裏面EndOverview渲染方法，改變env={this.props.params.env}到env={this.props.params.env || this.props.name}。

我不知道這是否是你的情況下，最好的解決辦法，但我希望，爲什麼{this.props.children}是undefined澄清;）