1、创建高阶组件，代码如下：

import React from 'react'

function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

// 高阶组件
function WithHoc(WrappedComponent) {
    class Hoc extends React.Component {
        state = {
            x: 0,
            y: 0
        }
    
        moveMouse = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }

        componentDidMount() {
            window.addEventListener('mousemove', this.moveMouse)
        }

        componentWillUnmount() {
            window.removeEventListener('mousemove', this.moveMouse)
        }

        render() {
            return <WrappedComponent {...this.state} {...this.props} />
        }
    }

    Hoc.displayName = `WithHoc${getDisplayName(WrappedComponent)}`

    return Hoc
}

export default WithHoc

2、组件运用

import React from 'react'
import WithHoc from './components/move-mouse/WithHoc'

function Mouse(props) {
    return <p>鼠标当前坐标：{props.x}，{props.y}</p>
}

const CoordMouse = WithHoc(Mouse)

function App() {
    return (
        <div className="App">
            <CoordMouse />
        </div>
    )
}

export default App