如何在等待渲染時加載加載Reactjs

Question

我剛剛用css製作了一個動畫「加載..」，但我希望它只在等待數據加載/渲染時才存在..任何想法我真的不知道知道如何IM這麼新呢？...

這是我componentdidmount

componentDidMount() { 
    $.ajax({ 
    url:'http://localhost:5118/api/employeedetails/getemployeedetails/', 
    success:(data)=>{ 

    this.setState({ 
     jsonReturnedValue:data 
    }) 
    } 
}) 
    this.setState({isLoading: false}) 
} 

，這是我的渲染

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"> 
      <div className="Loader-indicator" > 
      <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> 
      </div> 
     </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

保持狀態的反應被設置爲true，每當組件你打電話來加載數據

如

class App extends React.Component { 
    constructor(){ 
     super(); 
     this.state = {isLoading: true} 
    } 


componentDidMount() { 


    $.ajax({ 
     url:'http://localhost:5118/api/employeedetails/getemployeedetails/', 
     success:(data)=>{ 
     this.setState({ 
      jsonReturnedValue:data, isLoading: false 
     }) 
     } 
    }) 

} 

render() { 
    if(this.state.isLoading) { 
      return <span className="Loader"> 
      <div className="Loader-indicator" > 
      <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> 
      </div> 
     </span> 
    } 
    return (
     <div>Hello World</div> 
    ) 

} 

看到一個演示片段

class App extends React.Component { 
 
     constructor(){ 
 
      super(); 
 
      this.state = {isLoading: true} 
 
     } 
 
    
 
    
 
    componentDidMount() { 
 
    
 
     setTimeout(() => {this.setState({isLoading: false})}, 3000) 
 
     
 
    } 
 
    
 
    render() { 
 
     if(this.state.isLoading) { 
 
       return <span className="Loader"> 
 
       <div className="Loader-indicator" > 
 
       <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> 
 
       </div> 
 
      </span> 
 
     } 
 
     return (
 
      <div>Hello World</div> 
 
     ) 
 
     
 
    } 
 
}  
 
    ReactDOM.render(<App/>, 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>

Answer 2

添加loading狀態，並使其真實，加載數據時。

render()函數使得添加加載狀態碼，使用?運算符。

{this.state.loading ? (<YourComponent />) : (<LoadingState />)} 

更換<YourComponent />和<LoadingState />與您的組件或需要JSX標籤...