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组件没有被渲染，随后也没有任何子组件。如果我删除Container组件，则VideoConference组件加载没有问题。因此，我被认为问题在于Container组件的呈现方式。感谢任何帮助。

Answer 1

我从未在路由器

中看到此组件实例化

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

并尝试使用静态实例从Container访问应用程序属性。否则，您可以指定类似“上下文”对象的内容，所有组件都可以访问它。

Answer 2

如果你试图将道具传递给子路线，你可以从顶级组件这样做。

更改

{this.props.children}

到

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

但请注意，这个道具将传递给所有孩子

React路由器不呈现组件

2 个答案: