我怎样才能重新加载只是表中没有整个页面在React Js

Question

我做了一个代码，显示loading..之前整个事情显示出来，但我只想加载表，我试图分开"List of Employee" and the button但它只是没有'工作。

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

为装载机制作单独的渲染器

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> 
     } 
    } 

然后调用它桌下

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

据我了解，你只希望表显示加载和休息要呈现直到数据是可用的，你可以不喜欢它

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

加载组件

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> 
}