반응 js 로딩 스피너 생성 방법

Question

반응 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

당신은

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

대신 텍스트 "로드"의 회 전자 이미지에 넣어 Fiddle

감사