反应路由器不渲染组件

debugcn 发表于 Dev

呆滞的

这是我的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组件，随后也没有子组件。如果我删除了Container组件，那么VideoConference组件将加载而不会出现问题。因此，我被假定为问题出在渲染容器组件的方式之内。感谢任何帮助。

污垢

我从未在路由器内部看到此组件实例化

 <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访问应用程序属性。否则，您可以分配“上下文”对象之类的东西，所有组件都可以访问。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。