액세스 심판은 내가 첫 번째 구성 요소가 나타납니다 두 형제의 구성 요소를,이 경우 다음과 같이 내가이 상황을

Question

반응

import X from './x' 

    export class Y extends Component { 

     render(){ 
      return (
       <div> 
        <div> 
         //Here I want to render the div inside //component X 
         // In the real case, I show the div here in     //response to a button click event. 
         //I have tried to import the component and get   //the refs of X, but that is not working. 
        </div> 

       </div> 

      ) 
     } 
    } 

구성 요소 X를 Y로 가져 와서 X의 참조를 가져 오려고했으나 작동하지 않습니다 (참조 개체는 항상 null입니다). 내가 이것을 성취 할 수있는 다른 방법이 있습니까?

Answer 1

X을 가져 오기하면 구성 요소의 클래스를 가져 오기 만하면됩니다. 해당 인스턴스가 아닙니다 (https://en.wikipedia.org/wiki/Class_(computer_programming))

구성 요소가 마운트 (한 번 렌더링)되기 전까지는 구성 요소 을 사용할 수 없습니다. 따라서 refs 개체에 처음 액세스하면 구성 요소 componentDidMount 수명주기 기능에 있습니다.

문제를 해결하려면 구성 요소 X이 해당 트리의 상위 구성 요소로 refs을 전달해야합니다. 부모는 X과 Y을 렌더링합니다. X이 마운트되면 부모 컨테이너에서 refs을 인수로 사용하여 콜백을 호출 할 수 있습니다. 이제 부모가 이에 대응하여 refs 개체를 Y에 props을 통해 전달할 수 있습니다. 로컬 상태 this.state/setState을 사용하면 X 마운트를 수행 한 후 Y의 렌더링을 쉽게 다시 수행 할 수 있습니다.