Question

我在整个事情出现之前创建了一个显示if (![_support_long_messages boolValue]) { [self showAlert]; }的代码，但我只是想加载表，我只是尝试将loading..分开，但它只是不起作用。

"List of Employee" and the button

Answer 1

据我了解，您只希望表格显示加载和休息，直到数据可用，您可以像

一样

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

Answer 2

为装载程序单独渲染

   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>

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

2 个答案: