React组件(二)：Render Props

Render Props：通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件

1.用 class 组件抽离公共部分

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 属性，而且是函数
}

2.封装好的组件交给调用方

const App = (props) => (
    <div style={{ height: '500px' }}>
        <p>{props.testProp}</p>
        <Mouse render={
            /* render 是一个函数组件 */
            ({ x, y }) => <h1>The mouse position is ({x}, {y})</h1>
        }/>
        
    </div>
)

总结：

1. 定义了 Mouse 组件，只有获取 x y 的能力；

2. 至于 Mouse 组件如何渲染，App 说了算，通过 render prop 的方式告诉 Mouse。