在處理程序中使用JSX代碼調用函數

Question

我想在頁面給我一個錯誤並重定向到登錄頁面時呈現一個Loader。

我的Loader代碼如下。

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

下面是我打電話的地方。它在另一個文件中。

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); 
    } 
    };` 

以什麼方式可以在那裏調用Loader？我是否需要導入Loader，然後像調用函數一樣調用它？

Answer 1

你應該叫的setState，例如this.setState({ isLoading: true })和渲染方法調用您的裝載機（但你必須將其導入到您的文件），作爲 render() { if (this.state.isLoading) { return <Loader />} }