react添加页面加载loading

作者: MJ 分类: react 发布时间: 2018-11-09 10:08

react添加页面加载loading

import React, { Component } from 'react';
import Children from './Children';

class Father extends Component {
  constructor(props){
    super(props);
    this.state = {
      show:true
    }
  }
  componentWillMount(){
    this.setState({
      show:true
    })
  }
  componentDidMount(){
    setTimeout(() => {
      this.setState({
        show:false
      })
    }, 2000);
  }
  htmls(){
    if(this.state.show){
      return (
          <Children flag={this.state.show}></Children>
      ) 
    }else{
      return null
    }
  }
  render() {
      return (
        <div>
          {this.htmls()}
          <p>kkkkkkkkkkkkkkkkkkkkkkkkk</p>
        </div>
      ) 
  }
}

export default Father;

import React, { Component } from 'react';
class Children extends Component{
    render(){
        var styles = {
            bg:{
                position:'fixed',
                top:'0',
                left:'0',
                right:'0',
                bottom:'0',
                backgroundColor:'rgba(0,0,0,0.5)',
                dispaly:'flex'
            },
            main:{
                width:'50px',
                height:'50px',
                backgroundColor:'#fff',
                borderRadius:'20px',
                position:'absolute',
                top:'50%',
                left:'50%',
                marginTop:'-25px',
                marginLeft:'-25px',
                padding:'20px'
            }
        }
        return (
            <div className={'popup'} style={styles.bg}>
                <div className={'main'} style={styles.main}>
                <img alt='1' src={require('../assets/img/loading.gif')}/>
                </div>    
            </div>
        )
    }
}
export default Children;

 

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注