子コンポーネントの前にラッパーコンポーネントをマウントするにはどうすればよいですか？

Question

ユーザーが認証されていない場合、子をマウントしないラッパーを作成しようとしています。それ以外の場合は、子コンポーネントをマウントしてレンダリングします。 は、およそ次のようになります。

export class RedirectOnCondition extends Component { 
    render(){ 
    return this.props.isAuthenticated? this.props.children : null 
    } 
} 

私の問題は、親が条件を評価する機会を持つ前に、子供がまだマウントです。子のcomponentWillMount`（およびそれに関連するすべてのAPI呼び出しが起動し失敗した）の後でのみ、親のレンダリングが子をキックして削除します。 this questionによると、これはReactの仕組みです。

どうすればこの問題を回避できますか？

Answer 1

最初のレンダリングでは、親コンポーネントが、子コンポーネントの条件付きレンダリングを処理するために必要な小道具をまだ受け取っていない可能性があります。この場合、最初に小道具があるかどうかを確認することができます。

export class RedirectOnCondition extends Component { 
render(){ 
    return "isAuthenticated" in this.props ? this.props.isAuthenticated? this.props.children : null : null 
} 
}