在vue 中 我们可以使用slot插槽技术来定义 向子组件内部动态传入带内容的结构(标签)

那如何在react 也使用这样的技术呢？

children props

function A(){
return (
     <div>
          <B><C></C></B>
    </div>
)
}

function B (props){

    return (
          <div>{props.children}</div>
            
    )
}
function C (){
    return (
          <div>我是C组件</div>
            
    )
}

在B 组件内部定义组件C 可以通过childern.props 来获取

如何：在C 中想要获取B 中的数据应该如何操作呢？ 显然在哪里定义都不太合适了，那么可以使用一个新的方法

render props

在上述代码中 A 中定义B 时 定义一个props render, 这个render是一个函数，改函数接收一个参数，返回一个待传入的内容组件，改组件在函数作用域下就可以获取参数信息，从而C 可以获取B 中数据

function A(){
return (
     <div>
          <B render={(data) =><C data={data}></C>}></B>
    </div>
)
}

function B (props){
    
    return (
          <div>{props.render('我是B数据')}</div>
            
    )
}
function C (props){
    return (
          <div>我是C组件---{props.data}</div>
            
    )
}