公共组件抽离（render props)

公共组件的实时鼠标位置 传递给子组件

结构  公共组件的render方法 把挂载props上的方法返回要渲染的容器

声明 CommonComponent中的render方法

render(){

return (<div style={{height:200}} onMouseMove={this.handlerMouseMove}> {this.props.fn(this.state)}</div>)

使用  <CommonComponent fn={ ({x,y})=><div> {x} {y}</div>}/>

import React from "react"

class CommonComponent extends React.Component{

constructor(props){ super(props);this.state={x:0,y:0} }

handlerMouseMove=(e)=>{this.setState({x:e.clientX,y:e.clientY})}

render(){return(<div style={{height:200}} onMouseMove={this.handlerMouseMove}>{this.props.fn(this.state)}</div>}

}

const ChildrenComponent=(props)=>{

return <CommonComponent fn={(x,y)=><div style={{height:200}}>{x},{y}</div>}

}

export default  ChildrenComponent

总结 使用公共组件的render方法能力 把挂载属性props的方法 把内容渲染到子组件中