react-app-loading

来源：互联网发布：铁路定额预算软件编辑：程序博客网时间：2024/05/29 03:38

项目在数据加载过程中显示的loading……加载完再显示子组件内容，即可这样写：

render(){    return(        <div>            {                this.state.initDone?                <Router />                :<div>正在加载中</div>            }        </div>    )}

完整的代码如下：

//index.jsimport "../css/reset.css";import "../css/common.css";import React,{ Component } from 'react';import { render } from 'react-dom';import RouterMap from '../router/routerMap';class Main extends Component{    constructor(props){        super(props);        this.state = {            initDone: false        }    }    render(){        //console.log(this.props.children);        return (            <div className="container">                {                    this.state.initDone?                    <RouterMap />                    :<div>正在加载中……</div>                }            </div>        )    }    componentDidMount(){        setTimeout(()=>{            this.setState({                initDone: true            })        },1000)    }}render(    <Main />,    document.getElementById('root'))

阅读全文

0 0