React中renderProps的使用

以下是对renderProps和childrenProps的使用

index.jsx

import React ,{Component} from 'react'
import './index.css'

export default class A extends Component {
    render(){
        return (
            <div className='a'>
                <h2>我是A组件</h2>
                {/* render调用函数，返回值是C组件，传参是name */}
                <B render={(name)=><C name={name}/>}>你好</B>
            </div>
        )
    }
}

class B extends Component {

    state = {name: 'james'}
    render(){
        const {name} = this.state
        return (
            <div className='b'>
                {/* B组件标签中的内容需要通过this.props.children才能显示 */}
                <h2>{this.props.children},我是B组件</h2>
                {/* 这里相当于定义一个占位插槽 */}
                {this.props.render(name)}
            </div>
        )
    }
}

class C extends Component {
    render(){
        return (
            <div className='c'>
                <h2>我是C组件</h2>
                <h2>我从B组件接收到的名字是：{this.props.name}</h2>
            </div>
        )
    }
}

index.css

.a {
    width: 500px;
    background-color: rgb(0, 255, 213);
    padding: 10px;
}

.b {
    width: calc(100% - 20px);
    background-color: rgb(0, 162, 255);
    padding: 10px;
}

.c {
    width: calc(100% - 20px);
    background-color: rgb(212, 212, 212);
    padding: 10px;
}

效果