在处理程序中使用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 />} }