하위 구성 요소에서 상위 구성 요소 상태에 액세스하는 방법?

Question

내 애플 리케이션에서 라우팅 목적으로 반응 라우터 (v3)를 사용하고 있습니다. 중첩 된 경로가 있고 자식 구성 요소의 부모 구성 요소 상태에 액세스하려고합니다.

경로 :

<Route component={Main}> 
    <Route path="home" component={Home} /> 
</Route> 

주요 구성 요소 (부모) :

export default class Main extends Component { 
    constructor(prop){ 
    super(prop); 
    this.state = { 
     user : {} 
    } 
    } 

    render(){ 
    return (
     <div> 
     Main component 
     </div> 
    ) 
    } 
} 

홈 구성 요소 (자식) :

export default class Home extends Component { 
    constructor(prop){ 
    super(prop); 
    } 

    render(){ 
    return (
     <div> 
     Main component 
     want to access user data here. how to access user from parent component? 
     </div> 
    ) 
    } 
} 

Home 구성 요소에서 상위 구성 요소 인 사용자 데이터에 액세스하려는 경우 Main. 자식 구성 요소에서 부모 구성 요소 상태에 액세스 할 수있는 방법이 있습니까?

Answer 1

App은 직접적으로 Home을 렌더링하지 않으므로 user을 Home으로 전달할 수 없습니다. 너는 React-Router을 통해 그것을하고있다.

1. 이 저장소에 user에 Redux 및 connect() 모두 Main 및 Home 같은 상태 관리 솔루션을 사용
   은 현재이 방법을 얻었다. 이렇게하면 user은 Main 상태의 일부가 아니며 앱 스토어의 일부이며 다른 구성 요소에서 액세스 할 수 있습니다. 이것은 가장 정교하고 확장 가능한 솔루션입니다.
2. Contexts을 사용하십시오. 문서에서 : 경우에 따라 모든 레벨에서 수동으로 소품을 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달하려고합니다. 강력한 "컨텍스트"API를 사용하여 React에서 직접이 작업을 수행 할 수 있습니다. Redux 또는 Mobx 또는 모든 상태 관리를 사용하지 않으려면이 방법이 좋습니다.