反應路由器不渲染組件

Question

這是我的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>
    );
  }
}

我遇到的問題是容器組件沒有被渲染，因此子組件都不是。 如果刪除了Container組件，則VideoConference組件將加載而不會出現問題。 因此，我被假定為問題出在渲染容器組件的方式之內。 感謝任何幫助。

Answer 1

我從未在路由器內部看到此組件實例化

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

路由器組件是頂級組件，僅需要來自url的prop，請嘗試執行此操作

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

否則，看起來您在應用程序邏輯方面存在一些問題。

嘗試執行以下操作：

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

並嘗試使用靜態實例從Container訪問應用程序屬性。 否則，您可以分配“上下文”對象之類的東西，所有組件都可以訪問。

Answer 2

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

更改

{this.props.children}

至

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

但請注意，該道具將傳遞給所有兒童