render props

如何向组件内部动态传入带内容的结构(标签)?

Vue中: 
    使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
①使用children props: 通过组件标签体传入结构
②使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

①children props

格式：（在A组件的标签体里面放B，这样在A的class里面，可以把this.props.children放在指定地方来在A组件的指定地方显示B，可以参考Navlink那个博客里面有写这个知识点）

问题: 如果B组件需要A组件内的数据, ==> 做不到

（

因为A B在使用的时候

                <A>
                          <B>xxxx</B>
                </A>

看不出来是父子关系的，没办法给B传A的数据

） 

例子如下：

②render props 

①  定义组件A的时候传入一个函数，返回值是B组件

<A render={(data) => <B data={data}></B>}>
</A>

②  A组件:

 {this.props.render(内部state数据)}

        这里的render是个函数，接收传过去的参数返回给组件B，并且把接受了参数的组件B作为返回值
 

③  B组件:

        读取A组件传入的数据显示 {this.props.data} 

参考链接：

尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili