React - 상태에 따라 렌더링 할 때 하위 구성 요소에서 참조를 사용할 수 없습니다.

Question

ref를 사용하려고하는 이상한 버그가 발생했습니다.

부모 요소 :

class Parent extends Component { 
    constructor(props) { 
    super(props); 

    this.state = {displayPage: 'one'}; 
    this.changePage = this.changePage.bind(this); 
    } 

    changePage(str){ 
    this.setState({ 
     displayPage: str 
    }) 
    } 

    render(){ 
    return(
     <div onClick={() => this.displayPage('one')}>One</div> 
     <div onClick={() => this.displayPage('two')}>Two</div> 
     <div onClick={() => this.displayPage('three')}>Three</div> 

     {this.state.displayPage === 'one' ? <One /> : true} 
     {this.state.displayPage === 'two' ? <Two /> : true} 
     {this.state.displayPage === 'three' ? <Three /> : true} 
    ); 
    } 
} 

자, 하위 구성 요소의 단순한 예 :

class Two extends Component { 
    render(){ 
    console.log(this, this.refs) 

    return(
     <div refs="test">This is the Two component</div> 
    ); 
    } 
} 

내 문제는 "이"가 "의 속성을 보여줍니다에 대한 CONSOLE.LOG 심판은 내가 원하는 모든 것을 가지고있다. "this.refs"를 로깅하면 "Object {}"가 반환됩니다. 이는 구성 요소 2와 3 또는 기본적으로 상태로 인해 즉시 표시되지 않는 구성 요소에서만 발생합니다. "this.refs"는 즉시 표시된 구성 요소에 대해 항상 작동합니다.

또한 3 진 조건에서 제거한 경우 refs가 의도 한대로 작동합니다.

ref="test" 또한

는, 문자열로 불과 할당 심판은 더 이상 사용되지지고, 그래서 당신은 단지로 재 할당의 Ref에 콜백을 전달 제안 : 사업부에서

Answer 1

변경 심판은 같은 심판하기 이 같은 클래스에 정적 속성 :

ref={(node) => { this.test = node; }}