如何創建加載微調器與反應js

Question

如何使用react js創建我簡單微調器？

讓說，我有這樣的代碼：

let cars = [ 
     {id: 1, name: "Golf"}, 
     {id: 2, name: "Audi"}, 
     {id: 3, name: "Passat"}, 
     {id: 4, name: "Bmw"} 
    ]; 

class Test extends React.Component { 
     constructor(props){ 
     super(props); 

     this.state = { 
     loading: true 
     } 
    } 

    componentDidMount(){ 
     this.setState({loading: false}) 
    } 

     render(){ 
     let content = this.state.loading ? <div>Loading</div> : cars.map((c, i) => <div key={i}>{c.name}</div>) 

     return (
     <div>{content}</div> 
    ) 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

而且我試圖表現出loading而沒有裝載汽車的名單。

這裏是fiddle

任何想法？

Answer 1

您可以使用setTimeout來模擬異步請求

componentDidMount(){ 
    setTimeout(() => { 
     this.setState({loading: false}) 
    },2000) 
} // simulate loading 

曾爲 Fiddle

感謝