~~~ import React from 'react' // 高階組件 const withMouse = (Component) => { class withMouseComponent extends React.Component { constructor(props) { super(props) this.state = { x: 0, y: 0 } } handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }) } render() { return ( <div style={{ height: '500px' }} onMouseMove={this.handleMouseMove}> {/* 1. 透傳所有 props 2. 增加 mouse 屬性 */} <Component {...this.props} mouse={this.state}/> </div> ) } } return withMouseComponent } const App = (props) => { const a = props.a const { x, y } = props.mouse // 接收 mouse 屬性 return ( <div style={{ height: '500px' }}> <h1>The mouse position is ({x}, {y})</h1> <p>{a}</p> </div> ) } export default withMouse(App) // 返回高階函數 ~~~