React之Render Props的使用

让两个组件形成父子组件的方法

 

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的简单用法