反应路由器不渲染组件

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 })}

但请注意，该道具将传递给所有儿童