Wie kann ich nur die Tabelle nicht die ganze Seite in React Js laden

Question

Ich machte einen Code, der loading.. zeigt, bevor die ganze Sache auftaucht, aber ich möchte nur die Tabelle laden Ich habe versucht, die "List of Employee" and the button zu trennen, aber es tut einfach nicht ' t arbeiten.

renderItem(d, i) { 
     return <tr key={i} > 
     <td> {d.Employee_ID} </td> 
     <td>{d.Employee_Name}</td> 
     <td>{d.Address }</td> 
     <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td> 
     <td><center><button className ='btn btn-danger' onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td> 
     </tr> 
    } 

    render() { 
      if(this.state.isLoading) { 
       return <span className="Loader"> 
         <h1> 
        <span>Loading</span> 
        <span className="Loader-ellipsis" > 
        <span className="Loader-ellipsisDot">.</span> 
        <span className="Loader-ellipsisDot">.</span> 
        <span className="Loader-ellipsisDot">.</span> 
        </span> 
       </h1> 

      </span> 
     } 

     let {jsonReturnedValue} = this.state; 
     const isEnabled = this.canBeSubmitted(); 


     return(
     <div> 
     <div> 

      <div className="container"> 
       <h1> Listof Employees </h1> 
       <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button> 
       <table className= "table table-bordered" id="result"> 
        <tbody> 
        <tr> 
          <th>ID</th> 
          <th>Name</th> 
          <th>Address</th> 
          <th>Update</th> 
          <th>Delete</th> 
        </tr> 
         {/* 
      */} 
         {jsonReturnedValue.map((d,i) => this.renderItem(d,i))} 

      </tbody> 

       </table> 
       </div> 

Answer 1

tun können

ein separates Rendering für den Lader machen

renderLoader(){ 
     if(this.state.isLoading) { 
       return <span className="Loader"> 
         <h1> 
        <span>Loading</span> 
        <span className="Loader-ellipsis" > 
        <span className="Loader-ellipsisDot">.</span> 
        <span className="Loader-ellipsisDot">.</span> 
        <span className="Loader-ellipsisDot">.</span> 
        </span> 
       </h1> 

      </span> 
     } 
    } 

es dann unter dem Tisch rufen

render() { 


    let {jsonReturnedValue} = this.state; 
    const isEnabled = this.canBeSubmitted(); 


    return(
    <div> 
    <div> 

     <div className="container"> 
      <h1> Listof Employees </h1> 
      <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button> 

      <table className= "table table-bordered" id="result"> 
       <tbody> 
       <tr> 
         <th>ID</th> 
         <th>Name</th> 
         <th>Address</th> 
         <th>Update</th> 
         <th>Delete</th> 
       </tr> 



        {/* 
     */} 
        {jsonReturnedValue.map((d,i) => this.renderItem(d,i))} 

     </tbody> 

Answer 2

Soweit ich verstehe Sie nur die Tabelle Laden zeigen wollen und Ruhe zur Verfügung, bis die Daten wiedergegeben werden soll, können Sie es wie

renderItem(d, i) { 
     return <tr key={i} > 
     <td> {d.Employee_ID} </td> 
     <td>{d.Employee_Name}</td> 
     <td>{d.Address }</td> 
     <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td> 
     <td><center><button className ='btn btn-danger' onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td> 
     </tr> 
    } 

    render() { 


     let {jsonReturnedValue} = this.state; 
     const isEnabled = this.canBeSubmitted(); 


     return(
     <div> 
     <div> 

      <div className="container"> 
       <h1> Listof Employees </h1> 
       <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button> 
       <table className= "table table-bordered" id="result"> 
        <tbody> 
        <tr> 
          <th>ID</th> 
          <th>Name</th> 
          <th>Address</th> 
          <th>Update</th> 
          <th>Delete</th> 
        </tr> 
        {this.state.loading? <Loading/> : jsonReturnedValue.map((d,i) => this.renderItem(d,i))} 

      </tbody> 

       </table> 
       </div> 
      </div> 
     </div> 
    ) 
} 

Laden Komponente

const Loading =() => { 
    return <span className="Loader"> 
         <h1> 
        <span>Loading</span> 
        <span className="Loader-ellipsis" > 
        <span className="Loader-ellipsisDot">.</span> 
        <span className="Loader-ellipsisDot">.</span> 
        <span className="Loader-ellipsisDot">.</span> 
        </span> 
       </h1> 

      </span> 
}