Aufruf der Funktion mit JSX-Code im Handler

Question

Ich möchte einen Loader rendern, wenn meine Seite mir einen Fehler meldet und auf die Anmeldeseite umleitet.

Mein Loader-Code ist wie folgt.

export const Loader =() => (
    <Grid container justify="center" align="center" style={{ height: '100%' }} > 
     <Grid item > 
      <CircularProgress /> 
     </Grid> 
     </Grid> 
); 

Unten ist, wo ich anrufen würde. Es ist in einer anderen Datei.

handleRequestClose =() => { 
    const { errorActions } = this.props; 
    errorActions.close(); 
    if (this.props.isLogined && isLogined()) { 
     // Render Loader before the time runs out and redirects me 
     window.setTimeout(function() { 
     window.location.href = '/'; 
     }, 9000); 
    } 
    };` 

In welcher Weise kann ich Loader dort anrufen? Muss ich Loader importieren und dann einfach wie eine Funktion aufrufen?

Answer 1

Sie sollten setState nennen, zum Beispiel this.setState({ isLoading: true }) und in der Render-Methode rufen Sie Ihren Loader (aber Sie müssen es auf Ihre Datei importieren), als render() { if (this.state.isLoading) { return <Loader />} }