陣營路由器沒有呈現部件

這裏是我的App.js代碼陣營路由器沒有呈現部件

render() { 
    return (
     <Router history={hashHistory}> 
     <Route path='/' component={()=>{return <Container videoConf = {this.state.videoConferenceCapable}/>}}> 
      <IndexRoute component={SourcesContainer} /> 
      <Route path='/videoConference' component={()=>{return <VideoConference deviceID="57ab270b59edc845274aae09"/>}} /> 
     </Route> 
     </Router> 
    ) 
    }

而且從Container.js

export default class Container extends React.Component { 

    render() { 

    const NavBar = this.props.videoConf ? <div><Nav/></div> : <span></span> 
    return (
     <div className="container"> 
     {NavBar} 
     <div> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    } 
}

我遇到的問題是，容器組件沒有被並且隨後沒有一個孩子也是。如果我刪除了容器組件，那麼VideoConference組件加載沒有問題。因此，我認爲問題在於Container組件呈現的方式。感謝任何幫助。

來源

2016-08-18 dellboyant

我從來沒有看到路由器的內部此組件實例

<Route path='/' component={()=>{return <Container videoConf = {this.state.videoConferenceCapable}/>}}>

路由器組件是頂級組件，需要從URL僅道具，嘗試這樣做

<Route path='/' component={Container}>

否則像你在應用程序邏輯上有一些問題。

嘗試做這一個：

export default Application extends React.Component{ 
static instance; 
constructor() { 
    Application.instance = this; 
} 
render(){ 
    return <Router /> 
} 
}

，並嘗試使用靜態實例從容器訪問應用程序的性能。否則，您可以分配諸如「上下文」對象之類的東西，所有組件都可以訪問該對象。

來源

2016-08-18 15:32:19 degr

是{集裝箱}單獨工作，但是我需要通過視像會議託通過。。 – dellboyant

如果您嘗試將道具傳遞給子路線，您可以通過頂層組件以這種方式進行。

變化

{this.props.children}

到

{React.cloneElement(this.props.children, { videoConf : this.state.videoConferenceCapable })}

但是請注意，這個道具將被傳遞到所有兒童

來源

2016-08-18 16:21:41 Deadfish

陣營路由器沒有呈現部件

回答

相關問題