reactjs émission show chargement pendant que dom rend avec plus de logique

Question

Je suis confronté au problème d'affichage du chargement pendant le rendu de DOM. Je sais qu'il y a d'autres publications sur le chargement des données, mais la mienne est un peu différente. J'ai la logique dans la méthode de rendu pour rendre la grille (avec plus de données) qui prend plus de temps. Dans ce cas, la fonction de rendu ne montrera pas le chargement car elle traite toujours la logique. Toute aide serait appréciée.

par exemple,

class DataGrid extends React.Component { 

    constructor(props, context) { 
    this.state = {isLoading : false} 
    } 

    render(){ 

    //logic to render. 
    .. 
    .. 
    .. 
    //takes long time 
    return(
       <div> 
       <Loader isLoading={this.state.isLoading} /> // This will not work since render is not complete 
       <OtherComponent /> 
       </div> 
    ) 
    } 
} 

Answer 1

Essayez de prendre votre logique de rendre la fonction render, quelque chose comme ceci:

class DataGrid extends React.Component { 

    constructor(props, context) { 
     this.state = {isLoading : true} 
    } 

    componentWillMount() { 
     //logic to render 
     //once logic is done: 
     this.setState({ isLoading: false }) 
    } 

    render(){ 

     if (this.state.isLoading) { 
      return <div> 
       <Loader/> 
      </div> 
     } 
     else return (
      <div> 
       <OtherComponent /> 
      </div> 
     ) 
    } 
} 

Answer 2

Il y a probablement deux problèmes dans votre code.

1. Dans votre constructeur, vous n'êtes pas appeler la méthode super()
2. Si votre logique prend du temps, mettez est à l'intérieur d'une fonction qui est appelée sur le rendu et à cause de la nature async de JS, votre déclaration de retour obtiendra exécuté

class DataGrid extends React.Component { 
 

 
    constructor(props, context) { 
 
    super(props, context); 
 
    this.state = {isLoading : true} 
 
    } 
 
    logicFunc =()=> { 
 
    setTimeout(function() { 
 
     this.setState({isLoading: false})  
 
     
 
    }.bind(this), 5000) 
 
    } 
 
    render(){ 
 

 
    this.logicFunc(); 
 
     
 
    return(
 
       <div> 
 
       <Loader isLoading={this.state.isLoading} /> 
 
       
 
       </div> 
 
    ) 
 
    } 
 
} 
 

 
class Loader extends React.Component { 
 

 
    render() { 
 
    if(this.props.isLoading) { 
 
     return <div>Loading...</div> 
 
    } else { 
 
     return <div>Hello World</div> 
 
    } 
 
    } 
 
    
 
} 
 

 
ReactDOM.render(<DataGrid/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>