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