라우터는 다음 구성 요소

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

의 I는 데 문제가 컨테이너 구성 요소가되지 않을 것입니다에서

렌더링되고 그 이후에는 그것도 아이들이 아니다. Container 구성 요소를 제거하면 VideoConference 구성 요소가 문제없이로드됩니다. 따라서 컨테이너 구성 요소가 렌더링되는 방식에 문제가 있다고 가정합니다. 어떤 도움을 주시면 감사하겠습니다.

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

을 정적 인스턴스를 사용하여 컨테이너에서 응용 프로그램 속성에 액세스하려고 :

이 하나를 수행하십시오. 그렇지 않으면 '컨텍스트'객체와 같은 것을 할당 할 수 있습니다.이 객체는 모든 구성 요소에 액세스 할 수 있습니다.

Answer 2

소품 경로에 소품을 전달하려는 경우 최상위 구성 요소에서 이렇게 할 수 있습니다.

변경

{this.props.children} 

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

에 그러나이 소품 혼자 모든 어린이