[英]React Router - Mounting component inside a nested component
我很难弄清楚如何使用react router v1.0将组件安装在嵌套组件中。 我有一个加载布局组件的App组件。 然后,布局组件将加载菜单和内容这两个组件。 我想基于路由在Content组件内加载不同的组件。
以下是我的示例代码。
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>
任何帮助/指针将不胜感激。
谢谢
与基本的React组件相同。 当您嵌套它们时,它们可以在this.props.children
上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>
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.