鼠标兔子跟随

效果

代码：

import React,{Component} from "react";
import img from './image/logo.png'
// 组件提供状态和修改状态的代码
class Mouse extends Component{
    //鼠标位置
    state = {
        x:0,
        y:0
    }
    handleMouseMove = e => {
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    //监听鼠标移动
    componentDidMount(){
        window.addEventListener('mousemove',this.handleMouseMove)
    }
    render(){
        return this.props.render(this.state)
    }
}
class Counter extends Component{
    render(){
        return (
            <div>
                <h1>props render 模式</h1>
                <Mouse render={mouse => {
                    return (
                        <p>鼠标位置{mouse.x},
                        {mouse.y}</p>
                    )
                }}/>
                {/* 猫捉老鼠 */}
                <Mouse render = {
                    mouse => {
                        return <img  src ={img}alt='猫'style={{
                            position:'absolute',
                            top:mouse.y,
                            left:mouse.x

                        }} />
                    }
                }/>
            </div>
        )
    }
}
export default Counter