トグル時の再マウントを引き起こすReactでの条件付きレンダリング

Question

最近、Reactに苦労して、いくつかの異なるもので表示できる条件付きレンダリング要素（ダイアログなど）を適切に制御する方法を理解しようとしています。たとえば、アイテムのリストはそれぞれ独自のモーダルコンテンツを持つことができますが、同じモーダルを共有します。必要がない場合はモーダル（display: none）を隠し、必要に応じて表示を変更するだけです。

問題は、表示されるたびにモーダルを再初期化する必要があるときに発生します。たとえば、モーダルには、現在のタブインデックスがモーダル状態で格納された一連のタブが含まれているとします。モーダルを閉じて再び開くと、現在のタブインデックスはゼロにリセットされると予想されますが、そうではありません。むしろそれはモーダルを隠す前に残されたものである。

このためかなり明白な理由は、それが最初にレンダリングされるときにモーダルにのみ、一度をマウントされていることです。その後のレンダリングの更新は、マウントライフサイクルメソッドを再実行しません。明らかに、ソリューションには、必要に応じてコンポーネントを再マウントする必要があります（通常は再度表示された場合）。私は

可能な例– Dialogべきのみアンマウントを思い付くとするときisDialogShown変更を再マウントしました。私はかなり確かですReactはこれに気付き、isDialogShownフラグの変更時にライフサイクルメソッドを正しく実行することができます。

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

CodePen Example - Conditional Rendering

これはそれを行うための最善の方法である場合しかし、私はわかりません。 ConditionalElement自体にプロパティを渡して、再レンダリングさせる方法があることを願っています。プロパティが特定の値であればnullをrender()関数から返すかもしれませんか？問題は、これが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; 
}; 

第2の方法は少し「ハッキー」と思われますが、もう少しネストされています。それはとにかくお勧めですか？素敵なことは、両方の方法でローカル状態を保持する必要がある場合、要素を「トグル」（un/re-mount）と「隠す」（display: none;）が可能であることです。これには別のパラメータ（isToggledとisShown）が必要です。

Answer 1

2番目の方法はOKですが、ネストされた結果が気に入らない場合は、コンポーネントの動作を強化するために高次コンポーネント（HOC）を作成し、それは、基本的なコンポーネントとnullを切り替える 'shouldRender'プロパティを認識しているということだけです。

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

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

このアプローチのもう一つの利点は、あなたが自由のための組み合わせの柔軟性を得ることで、あなたがプロパティを介して表示/非表示の動作を一般化したい場合は言う「shouldHide」、あなたは別のHOCを作成することができ、そしてちょうど作曲コンポーネントを強化するために、結果は常に1つのフラットコンポーネントです。

実際の例としては、http://codepen.io/anon/pen/MmzpdGをご確認ください。