React Router - 在嵌套組件中安裝組件

Question

我很難搞清楚如何使用react路由器v1.0在嵌套組件中安裝組件。我有一個加載佈局組件的應用程序組件。佈局組件然後加載兩個組件，菜單和內容。我想根據路線在內容組件中加載不同的組件。

以下是我的示例代碼。

var App = React.createClass({ 
    render : function(){ 
     return <div><Layout/></div> 
    } 
}); 

var Layout = React.createClass({ 
    render : function(){ 
     return(
      <div> 
       <Menu/> 
       <Content/> 
      </div> 
     ) 
    } 
}); 

var Content = React.createClass({ 
    render : function(){ 
     return <div>This is where i want to mount my components</div> 
    } 
}); 

var List = React.createClass({ 
    render : function(){ 
     return <div>some list goes here</div> 
    } 
}); 

var Graph = React.createClass({ 
    render : function(){ 
     return <div>some graph goes here</div> 
    } 
}); 

<Router> 
    <Route path='/' component={App}> 
     <Route path='/list' component={List}/> 
     <Route path='/graph' component={Graph}/> 
    </Route> 
</Router> 

任何幫助/指針將不勝感激。

謝謝

Answer 1

它和基本的React組件一樣。當你嵌套它們時，它們可以在this.props.children上獲得。所以你最終會得到這樣的結果：

var App = React.createClass({ 
    render : function(){ 
     return <div><Layout>{this.props.children}</Layout></div> 
    } 
}); 

var Layout = React.createClass({ 
    render : function(){ 
     return(
      <div> 
       <Menu/> 
       <Content>{this.props.children}</Content> 
      </div> 
     ) 
    } 
}); 

var Content = React.createClass({ 
    render : function(){ 
     return <div>{this.props.children}</div> 
    } 
});