~~~ import React from 'react' import PropTypes from 'prop-types' class Mouse 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}> {/* 將當前 state 作為 props ，傳遞給 render （render 是一個函數組件） */} {this.props.render(this.state)} </div> ) } } Mouse.propTypes = { render: PropTypes.func.isRequired // 必須接收一個 render 屬性，而且是函數 } const App = (props) => ( <div style={{ height: '500px' }}> <p>{props.a}</p> <Mouse render={ /* render 是一個函數組件 */ ({ x, y }) => <h1>The mouse position is ({x}, {y})</h1> }/> </div> ) /** * 即，定義了 Mouse 組件，只有獲取 x y 的能力。 * 至于 Mouse 組件如何渲染，App 說了算，通過 render prop 的方式告訴 Mouse 。 */ export default App ~~~