import React, { Component } from 'react'
const withSize = (C1) => {
console.log('with Size')
return class toSize extends Component {
state = {
xProp : document.documentElement.clientWidth,
yProp : document.documentElement.clientHeight
}
getProps = () => {
this.setState({
xProp : document.documentElement.clientWidth,
yProp : document.documentElement.clientHeight
});
}
componentDidMount() {
window.addEventListener('resize', this.getProps);
}
componentWillUnmount() {
window.removeEventListener('resive', this.getProps);
}
componentDidUpdate() {
}
render() {
console.log('yzj')
return <C1 {...this.state}/>
}
}
}
class C1 extends Component {
render() {
console.log('x',this.props.xProp)
return (
<div>
<div>子组件</div>
<label>宽:{this.props.xProp}</label>
<label>高:{this.props.yProp}</label>
</div>
)
}
}
class C2 extends Component {
render() {
console.log('y',this.props.yProp)
return (
<div>
<div>父组件</div>
<label>宽:{this.props.xProp}</label>
<label>高:{this.props.yProp}</label>
</div>
)
}
}
const Hoc1 = withSize(C1);
const Hoc2 = withSize(C2);
export default class App1 extends Component {
render() {
return (
<div>
<div>111</div>
<Hoc1 />
<Hoc2 />
</div>
)
}
}
