react学习-----render-props

render-props的使用

// 定义一个组件 child
export default class Mouse extends React.Component {
	//  鼠标的 x, y 坐标
	state = {
		x: 0,
		y: 0
	},
	//鼠标移动处理程序
	handleMousemove = e => {
		this.setState({
			x: e.clientX,
			y: e.clientY
		})
	},
	// 监听我们的鼠标移动事件
	componentDidMount() {
		window.addEventListener('mousemove', this.handleMousemove )
	},
	render() { 
		return this.props.render(this.state)
		// children 方式
		// return this.props.children(this.state)
	}
}

//定义一个调用mouse的组件
import 'Mouse' from './Mouse'
class App extends React.Component {
	return (
		<div>
			// mouse 即为 Mouse组件中的 state
			<Mouse render={ (mouse) => {
				return (
					<p>鼠标位置:{ mouse.x } { mouse.y }</p>
				)
			} } />
			// children 方式
			/*<Mouse>
				{ mouse => { 
					return (
						<p>鼠标位置:{ mouse.x } { mouse.y }</p>
					)
				} }
			</Mouse> */
		</div>
	)
}