渲染路由器儿童ReactJS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了渲染路由器儿童ReactJS相关的知识,希望对你有一定的参考价值。

嗨,大家好,所以我的网站上有一个带侧边栏的页面,因为这张图显示了page Drawing

该图显示了我的应用程序的子页面。我目前正在尝试在标记为{this.props.children}的区域中呈现子组件。目前我的页面呈现没有子组件的内容。只是空白。

这是我的路由器设置

<Router history={hashHistory}>
    <Route path="/" component={App}>
    <IndexRoute component={LandingPage}/>
    <Route path="serviceitem" component={FullService}>
      <IndexRedirect to="trial"/>
      <Route path="trial" component={Trial}/>
    </Route>
    <Route path="services" component={Services}/>
    <Route path="specials" component={Specials}/>
    </Route>
</Router>

这就是我试图渲染我的组件子项的方法

这是ServicePane组件SideBar {} this.props.children

这是FullServicePane

    <div>
     <NavigationBar/>
     <ServicePane/> 
    </div>

FullService包含

 <div>
    <FullServicePane/>
    <div className="row">
     <BottomBar/>
    </div>
    </div>
答案

我道歉我认为我发现了错误这是一个孩子的孩子,这让我相信我的巢很深,最后再做了

我的实际组件是

FullService-> 
FullServicePage ->
  ServicePane ->
    Trial 

在这种情况下,Trial是ServicePane的子项,而不是FullServicePane

以上是关于渲染路由器儿童ReactJS的主要内容,如果未能解决你的问题,请参考以下文章

reactjs路由器无法读取未定义的渲染

ReactJS 路由组件/渲染

如何在 Reactjs 中添加丰富的代码片段?

ReactJS:从 rails 传递参数以将路由器反应到组件

儿童片段到父母片段沟通

ReactJS 使用在其他 ReactDOM 上呈现的按钮更改路由