反応でコンポーネントのマウントを解除する方法を教えてください。

Question

ローダーとカレンダーという2つのコンポーネントがあります。カレンダーがデータをフェッチするまで、loaderコンポーネントが表示され、データが取得されるたびにカレンダーcomponentがレンダリングされます。私はReduxを使ってアプリケーションの状態を管理しています。カレンダーには独自の状態があり、いくつかの変更があったらそれを維持したいので、カレンダーを解除してDOMに残さないようにしてください。したがって、現在のコンポーネントのビューが変わるたびに、ローダーが来て、カレンダーをアンマウントする代わりに非表示にする必要があります。これどうやってするの？

現在、私が書いた：私はReduxのを使用してAPIフックからデータをフェッチしています時に

render() { 
    let that = this, 
     { loading } = that.props; 

    return loading ? that.renderLoader() : that.renderCalendar(); 
    } 

カレンダーは、そののonChangeがあります

私はコンポーネントの再場合は、カレンダーのアンマウントを防ぐことができますどのように

onChange = (params) => { 
     //API Hooks 
} 

レンダリングする。前もって感謝します。

Answer 1

return loading ? that.renderLoader() : that.renderCalendar(); 

このようにして、コンポーネントをアンマウントすることはできません。唯一の方法は、コンポーネントを常に他のコンポーネントの上部に表示させてから、jQuery関数で表示または非表示にすることです。このカレンダーを還元会社reducerにリンクすると、カレンダーの状態が表示されたときに必要に変更されます。

Answer 2

あなたがしたいことが隠れている場合、文字通りCSSを使用して隠すのはなぜですか？

render() { 
    ... 
    return (
    <div> 
     <div style={{display: loading ? 'inline' : 'none'}}> 
     {that.renderLoader() 
     </div> 
     {!loading ? that.renderCalendar() : null} 
    </div> 
); 
}