React Router v4 라이프 사이클 이벤트

내 애플리케이션을 React Router v4로 업그레이드 이전에는 탐색시 팝업 메뉴 숨기기를 사용했던 이전 onUpdate 로직을 구현하는 데 어려움을 겪고 있습니다.React Router v4 라이프 사이클 이벤트

설명서에서 볼 수있는 유일한 방법은메서드를 활용하는 것입니다. 그러나 이전보다 훨씬 복잡한 것처럼 보입니다 - 더 쉬운 해결책은 무엇입니까?

const HidePopupThenRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={matchProps => { 
    hidePopup(); 
    return <Component {...matchProps}/> 
    }}/> 
) 

<HidePopupThenRoute path="/" component={MyComponent}/>

출처

2017-02-08 Daaavvy

비교적 깨끗한 해결책 was suggested on GitHub. 결론은 라우터의 기록을 React's Context API에서 읽었을 때 React Router가 기록한 것입니다. 당신은 당신의 구성 요소에 contextTypes 속성을 정의하여 수행 할 수 있습니다 :

라우터가 해당 구성 요소에 연결되어 있는지 확인합니다

static contextTypes = { 
    router: PropTypes.object 
};

. 그런 다음 해당 액세스를 라우터와 맥락에서 역사를 사용하고, 역사의 변화에서 실행됩니다 콜백 추가 할 수 있습니다

this.context.router.history.listen(hidePopup)

당신은 아마 componentDidMount에 그렇게 할 것입니다.

출처

2017-07-10 20:33:50 Vincent

나는 그것이 너무 복잡 고려하지 것입니다,하지만 난 그게 렌더링 기능의 내부 긴급 통화를 할 권리 보지 않고 이해할 수있다.

한 가지 대안은 위치 변경을 수신하고 발생했을 때 어떤 기능을 호출하는 OnUpdate 구성 요소를 만드는 것입니다.

내가 작성한 코드를 구현하기 위해 source code을 볼 수 있습니다. 비슷한 기능을 가진 구성 요소를 사용하거나 복제 할 수 있습니다. 기본적으로 모든 작업은 위치가 변경 될 때 history 개체를 구독하고 전달하는 모든 함수를 호출합니다.

const MyComponent =() => (
    <div> 
    <OnUpdate call={hideProps} /> 
    <h1>My Component</h1> 
    <p>...</p> 
    </div> 
)

출처

2017-02-08 18:01:18

React Router v4 라이프 사이클 이벤트

답변

관련 문제