토글 할 때 다시 마운트하는 React의 조건부 렌더링

Question

최근 여러 가지로 표시 될 수있는 조건부 렌더링 요소 (예 : 대화 상자)를 올바르게 제어하는 ​​방법을 연구하는 데 어려움을 겪고 있습니다. 예를 들어, 항목 목록은 각각 자체 모달 콘텐츠를 가질 수 있지만 여전히 동일한 모달을 공유합니다. 필요하지 않을 때 단순히 모달 (display: none)을 숨기고 필요한 경우 디스플레이를 변경합니다.

문제는 표시 될 때마다 모달을 다시 초기화해야 할 때 발생합니다. 예를 들어, 모달에는 현재 탭 인덱스가 모달 상태로 저장된 일련의 탭이 있습니다. 닫고 모달을 다시 열면 현재 탭 인덱스가 0으로 재설정 될 것으로 예상되지만 그렇지 않습니다. 오히려 그것이 모달을 숨기기 전에 남겨진 것은 무엇이든합니다.

모달은 처음에 렌더링 될 때 번만 번만 마운트됩니다. 후속 렌더링 업데이트는 탑재 수명주기 메소드를 재실행하지 않습니다. 분명한 것은 솔루션은 필요할 때마다 (일반적으로 다시 표시 할 때) 구성 요소를 다시 마운트해야한다는 것입니다. 나는

가능한 예를 – Dialog해야 만 마운트 해제에 올 때 isDialogShown 변화를 마운트했습니다. React가 이것을 알아 차리고 isDialogShown 플래그의 변경시 라이프 사이클 메소드를 올바르게 실행할 수 있는지 확실히 알 수 있습니다.

CodePen Example - Conditional Rendering

... 
const ParentElement = ({ isElementShown }) => { 
    return (
    {!Boolean(isElementShown) 
     ? null 
     : <ConditionalElement prop={stuff} /> 
    } 
); 
} 
... 

그러나,이 그것을 할 수있는 가장 좋은 방법이 있는지 확실하지 않습니다. ConditionalElement 자체에 속성을 전달하여 다시 렌더링하는 방법이 있었으면 좋겠습니다. 속성이 특정 값인 경우 render() 함수에서 null을 반환 할 수 있습니까? 문제는 이것이 ConditionalElement 자체를 리셋 할 것이라고 생각하지 않는다는 것입니다.

const ParentElement = ({ isElementShown }) => { 
    return (
     <ConditionalWrapper isShown={true}> 
     <ConditionalElement /> 
     <ConditionalWrapper/> 
    } 
); 
} 

const ConditionalWrapper = ({ children, isShown }) = { 
    // Don't render any children if the element should be hidden 
    // Also, styles would be applied to hide the wrapper if necessary 
    if (!isShown) { 
    return null; 
    } 

    // Render the children if not hidden 
    return children; 
}; 

두 번째 방법은 조금 덜 "해킹"되지만 조금 더 중첩 된 것처럼 보입니다. 어쨌든 추천할만한가요? 좋은 점은 두 가지 방법 모두 로컬 상태를 유지해야하는 경우 요소를 "토글 링"(해제/다시 마운트)하고 "숨기기"(display: none;) 할 수 있다는 것입니다. 그러면 다른 매개 변수 (isToggled 및 isShown)가 필요합니다.

Answer 1

두 번째 방법은 괜찮습니다. 그러나 더 중첩 된 결과가 마음에 들지 않으면 상위 구성 요소 (HOC)를 만들어 구성 요소 동작을 향상시킬 수 있으며 향상된 구성 요소는 원본과 동일하게 작동하고, 그냥 말하자면, 기본 구성 요소와 null을 전환하는 'shouldRender'속성을 알고 있다는 것입니다. 당신이 재산 'shouldHide', 다른 HOC를 만들 수 있습니다 통해 숨기기/표시의 동작을 일반화하려는 경우

const toTogglable = (Elem) => (props) => 
    props.shouldRender ? <Elem {...props}/> : null; 

const TogglableA = toTogglable(A); 
// Then you can use it like 
// <TogglableA shouldRender={true} {...otherProps} /> 

이 방법의 또 다른 장점은 당신이 무료로 composibility을받을 말할 것입니다, 그럼 그냥 구성 컴포넌트를 향상시키기 위해 결과는 항상 하나의 평면 컴포넌트입니다.

실례를 바탕으로 http://codepen.io/anon/pen/MmzpdG을 확인하십시오.