props 高阶组件

import React from 'react'

// 这个组件追踪web应用中鼠标的位置 
class MouseTracker extends React.Component{
    constructor(props){
        super(props)
        this.handleMouseMove=this.handleMouseMove.bind(this)
        this.state={
            x:0,
            y:0,
        }
    }

    handleMouseMove(e){
        this.setState({
            x:e.clientX,
            y:e.clientY,
        })
    }

    render(){
        return (
            <div style={{height:"100vh"}} onMouseMove={this.handleMouseMove}>
                <h1>移动鼠标</h1>
                <p>当前坐标位置是({this.state.x}-{this.state.y})</p>
                {/* props.render组件需要在这里显示出来，并使用我们这里的this.state这个参数 */}
                {this.props.render(this.state)}
                {/* 这里只是留了一个接口，来显示可能出现的组件 */}
            </div>
        )
    }
}

export default MouseTracker

使用
import React from 'react'

// 这个组件追踪web应用中鼠标的位置
class Cat extends React.Component{
    render() {
        const mouse = this.props.mouse;
        return (
          <div style={{ position: 'absolute', left: mouse.x, top: mouse.y,background:"yellow" }} />
        );
      }
}

export default Cat