react骨架屏的使用

import React from 'react';
import PropTypes from 'prop-types'
import { Skeleton } from 'antd';

class DepartCatalog extends React.Component{
    static contextTypes = {
        user: PropTypes.string
    }
    
    constructor(props){
        super(props)
        this.state={
            loading:true
        }
    }
    componentDidMount() {
        console.log("demo")
        setTimeout(()=>{
            this.setState({loading : false})
        },2000)
    }
    componentWillUnmount = () => {
        this.setState = (state,callback)=>{ //解决刷新异步找不到state的问题,也可以清除所有异步来实现。
          return;
        };
    }
    render(){
        return(
            <div className="flex-container">
                <Skeleton avatar title={false} loading={this.state.loading} active>
                    <div>{this.context.user}</div>
                </Skeleton>
            </div>
        )
    }
}
export {DepartCatalog};

猜你喜欢

转载自blog.csdn.net/weixin_39308542/article/details/100762971