render prop

Render Prop是个值为函数的属性，通过Render Prop，组件知道什么应该被渲染

import React from 'react'
function App() {
    return (
        <div style={{ height: '100%' }}>
            <Mouse render={({ x, y }) => (<h1>现在是{x},{y}</h1>)} />
        </div>
    )
}
class Mouse 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: '100%' }} onMouseMove={this.handleMouseMove}>
                {this.props.render(this.state)}
            </div>
        )
    }
}
export default App