如何向组件内部动态传入带内容的结构(标签)?
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