ReactJS / JavaScript-根据屏幕大小自动重新加载页面

时间:2018-11-11 18:24:18

标签: javascript reactjs reload

我想一次自动重新加载页面,具体取决于屏幕尺寸。

例如,如果我将台式机转到移动设备,则刷新一次;如果我将台式机移动到桌面,则刷新一次,依此类推。

这是我的代码:

class IndexPage extends Component {
constructor (props) {
    super(props)
    this.state = {
        loading: true,
        reload: true
    }
}

UNSAFE_componentWillMount() {
        setTimeout(() => {
            this.setState({
                loading: false,
            })
        }, 2000);
}
reload = () =>
{
    this.setState({ reload: false});
    window.location.reload()
}

render () {
    let width = window.innerWidth;

    if (this.state.loading) {
        return <Loading />
    }


   if (width < 1024 && this.state.reload) {
     this.reload()
     this.setState({ reload: false});
   } else {
     this.reload()
     this.setState({ reload: false});
   }

    return (
        <Fragment>
        {
            width < 1024 ?
            <div>
              Mobile
            </div
            :
              <div>
              Desktop
             </div>
        }
        </Fragment>
    )
}

}

0 个答案:

没有答案