react高阶组件

/* 高阶组件 */
import img from './image/1.jpg'
function withMouse(WrappedComponent){
    
  class Mouse extends React.Component{
        state={
          x:0,
          y:0
        }
        handleMouse=e=>{
          this.setState({
            x:e.clientX,
            y:e.clientY
          })
        }
        componentDidMount(){
          window.addEventListener("mousemove",this.handleMouse)
        }
        componentWillUnmount(){
          window.removeEventListener("mousemove",this.handleMouse)
        }
        render(){
          return <WrappedComponent {...this.state}></WrappedComponent>
        }
    }
    return Mouse
}
const Position=props=>{
  return  <p>
      鼠标当前位置(x:{props.x},y:{props.y})
  </p>
// return null
}
const Cat=props=>{
  return <img src={img} alt="图片" style={{position:"absolute",top:props.y-64,left:props.x-64,width:128+'px',height:128+'px'}}></img>
}
// 获取增强后组件
const MousePosition=withMouse(Position)
const MouseCat=withMouse(Cat)
class App extends React.Component{
  render(){
    return(
      <div>
        <h1>高阶组件</h1>
        <MouseCat></MouseCat>
      </div>
    )
  }
}
ReactDOM.render(<App></App>,document.getElementById("root"))