如何使用 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'));
我试图在汽车列表未加载时显示正在加载
。
这里是fiddle
有什么想法吗?
最佳答案
您可以使用setTimeout
来模拟异步请求
componentDidMount(){
setTimeout(() => {
this.setState({loading: false})
},2000)
} // simulate loading
工作过
Fiddle
谢谢
关于javascript - 如何使用 React js 创建加载旋转器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40724385/