在实现以下代码的时候,在屏幕大小改变的时候回跑出warning,但是效果
直接上代码
var React = require('react');
import DetectUtil from 'pofod/detectUtil';
function withSubscription(WrappedComponent,MobileComponent) {
class Subscription extends React.Component{
constructor(props){
super(props);
this.state={
ExternalComponent:innerWidth>1023?WrappedComponent:MobileComponent
}
this.getPageLangParams=this.getPageLangParams.bind(this);
this.MonitorSize = this.MonitorSize.bind(this);
}
getPageLangParams () {
var query=this.props.location?(this.props.location.query?this.props.location.query:{}):{};
var lang=this.props.lang||query.lang||DetectUtil.languageFamily()||'zh';
return lang;
}
MonitorSize(){
this.setState({
ExternalComponent:innerWidth<1023?MobileComponent:WrappedComponent
})
}
render(){
let lang = this.getPageLangParams();
let ExternalComponent = this.state.ExternalComponent;
return (
<ExternalComponent lang={lang}/>
)
}
componentDidMount(){
window.addEventListener('resize',this.MonitorSize)
}
componentWillUnmount(){
window.removeEventListener('resize',this.MonitorSize)
}
}
return Subscription;
}
module.exports = withSubscription;
其中函数的两个参数WrappedComponent和MobileComponent分别是两个组件
class Index extends React.Component{
.......
}
class Mobile extends React.Component{
.......
}
目的是实现通过resize监听屏幕尺寸变化,在小于1023的时候展现的是Mobile这个组件的内容。反之展现Index的内容。但是一直会有warning
求解#。#