如何使用 React 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在汽车列表未加载时进行显示。

这是小提琴

任何想法？

Answer 1

您可以使用setTimeout来模拟异步请求

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

工作过 Fiddle

谢谢