让两个组件形成父子组件的方法
1.组件声明时嵌套
function Acmp(props){
retrun(
<>
<h2>A组件</h2>
<Bcmp/>//Bcmp成为了Acmp的子组件
</>
)
}
function Bcmp(props){
return(
<>
<h2>B组件</h2>
</>
)
}
2.组件使用时形成嵌套
function Acmp(props){
retrun(
<>
<h2>A组件</h2>
{this.props.children}
</>
)
}
function Bcmp(props){
return(
<>
<h2>B组件</h2>
</>
)
}
funtion App(){
<>
<Acmp>
<Bcmp/>
</Acmp>
</>
}
那么问题出现了,这种方式形成的父子组件怎么在Bcmp组件获取Acmp中的值,这就要使用render props了
render props 更像一种思维方式,而不是一项技术
function Acmp(props){
let [data,setData] = useState()
retrun(
<>
<h2>A组件</h2>
{this.props.render(data)}----调用传入render函数,生成一个组件,并给生成的组件传值
</>
)
}
function Bcmp(props){
this.props.data//Acmp传来的值
return(
<>
<h2>B组件</h2>
</>
)
}
funtion App(){
<>
<Acmp render = { (data)=> <Bcmp data={data}/> } />
</>
}
利用Render Props实现多个组件共享一套逻辑
1.定义一个给其他组件复用逻辑的组件
class Hoc extends React.Component{
state = {
num:0
}
increNum = ()=>{
this.setState({num:++this.state.num})
}
decreNum = ()=>{
this.setState({num:--this.state.num})
}
render(){
let {num} = this.state
let increNum = this.increNum
let decreNum = this.decreNum
return(
<>
{this.props.render( {num,increNum,decreNum} )}
</>
)
}
}
class Acmp extends React.Component{
render(props){
let {num,increNum} = this.props.data
return(
<>
<h2>{num}</h2>
<button onClick={increNum}>加</button>
</>
)
}
}
class Bcmp extends React.Component{
render(props){
let {num,decreNum} = this.props.data
return(
<>
<h2>{num}</h2>
<button onClick={decreNum}>减</button>
</>
)
}
}
class App extends React.Component{
render(){
return(
<>
<Hoc render = {(data) => <Acmp data={data}/>} />
<Hoc render = {(data) => <Bcmp data={data}/>} />
</>
)
}
}
以上就是一个Render props的简单用法