Javascript 如何在React Js中仅重新加载表而不是整个页面

我制作了一个代码，在整个事件出现之前显示

加载..

，但我只想加载表，我尝试分离

“员工列表”和按钮

，但它不起作用

  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>

renderItem（d，i）{
回来
{d.Employee_ID}
{d.Employee_Name}
{d.Address}
编辑
删去
}
render（）{
if（此.state.isLoading）{
回来
加载
.
.
.
}
让{jsonReturnedValue}=this.state；
const isEnabled=this.canbesubmited（）；
返回(
雇员名单
添加员工
身份证件
名称
住址
使现代化
删去
{/*  
*/} 
{jsonReturnedValue.map（（d，i）=>this.renderItem（d，i））}

据我所知，您只希望表格显示加载，并在数据可用之前呈现其余内容，您可以这样做

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

renderItem（d，i）{
回来
{d.Employee_ID}
{d.Employee_Name}
{d.Address}
编辑
删去
}
render（）{
让{jsonReturnedValue}=this.state；
const isEnabled=this.canbesubmited（）；
返回(
雇员名单
添加员工
身份证件
名称
住址
使现代化
删去
{this.state.loading？：jsonReturnedValue.map（（d，i）=>this.renderItem（d，i））}
)
}

加载元件

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

常量加载=（）=>{
回来
加载
.
.
.
}

为加载程序进行单独渲染

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

renderLoader（）{
if（此.state.isLoading）{
回来
加载
.
.
.
}
}

那就把它放在桌子底下吧

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>

render（）{
让{jsonReturnedValue}=this.state；
const isEnabled=this.canbesubmited（）；
返回(
雇员名单
添加员工
身份证件
名称
住址
使现代化
删去
{/*  
*/} 
{jsonReturnedValue.map（（d，i）=>this.renderItem（d，i））}

据我所知，您只希望表格显示加载，并在数据可用之前呈现其余内容，是吗？