React扩展--类似插槽的renderProps

renderProps

有两个组件A、B，单看内部结构并不能看出父子关系，但会出现B组件可能作为A组件的情况，并要从A组件传值给B组件。如下：
A组件：

class A extends Component{

state={name:"tom"}
render(){
return (
<div>
<h1>我是A组件</h1>
</div>
)
}

}

B组件：

class B extends Component{

render(){
return (
<div>
<h1>我是B组件</h1>
</div>
)
}

}

在一个parent组件里渲染这两个组件的时候，发现B组件是A组件的子组件，则可以这样改写代码
对于Parent组件：

class Parent extends Component{

render(){
return (
<div>
<h1>我是Parent组件</h1>
<A render ={(name)=><B name={name}/>}/>//name是A组件传的值
</div>
)
}

}

A组件改写为：

class A extends Component{

state={name:"tom"}
render(){
return (
<div>
<h1>我是A组件</h1>
{this.props.render(name)}//相当于插槽占位
</div>
)
}

}