React学习--render props

render props相当于vue中的插槽技术，在某一位置预留一行代码this.props.render()，之后只需要在特定位置传入组件，即可展示

注意：此render为属性名

当不需要传值时

class Parent extends Component{
	render(){
		<div>
			<A render={() => <B/>}
			//A，B为父子组件
		</div>
	}
}
class A extends Component{
	render(){
		<div>
			<h2>我是A组件</h2>
			{this.props.render()}
			//展示B组件
		</div>
	}
}

需要传值时：

class Parent extends Component{
	render(){
		<div>
			<A render={(name) => <B name = {name}/>}
			//A，B为父子组件
		</div>
	}
}
class A extends Component{
	state = {name:'tom'}
	const {name} = this.state
	render(){
		<div>
			<h2>我是A组件</h2>
			{this.props.render(name)}
			//展示B组件
		</div>
	}
}
class B extends component{
	render(){
		<div>
			<h2>名字为{this.props.name}</h2>
		</div>
	}
}