当前位置: 首页 > Web前端 > HTML

React1中的renderProps和childrenProps

时间:2023-04-02 18:51:52 HTML

:废话不多说,直接说:这里一共有三个组件,我想在B组件中显示C组件,也就是说我想让B组件显示成为C组件的父亲。(这不是废话吗)我这样写不行吗?但是在实际工作中,我们往往会暂时不确定B和C组件之间的关系,等到最后决定。这时候我们假设B组件最终一定是C组件的父组件。其实在React中还有第二种方式可以让C组件成为B组件的子元素。如果你事先学习过一些知识点,你一定对这个很熟悉,即B标签的标签体内容就是C标签。但是如果简单的这样写,很遗憾,C标签是不会显示在页面上的。你可能会惊讶,这不应该,这是怎么回事。重点来了:你这个时候有没有忽略B的爸爸?厂牌A说:你这小子在我屁股底下跳来跳去,不管我是吧?这个时候你其实是在写A标签传给B标签的props的children属性里面的内容。你爹给你的东西,你不接受就不能展示,对不对?ok,现在页面正常显示了2:现在显示了renderprops,但是客户需求突然变了,我要你的B标签给C标签一个属性叫name,取值为“square”,让它在Ctag中显示,怎么办?你可能会想,这不就是一个简单的父亲在给儿子传递数据吗?道具不是刚做完吗?于是你兴高采烈的打开代码,然后发现B标签奇怪,我的C标签呢?哦是的。在A标签中,我必须写这个!当你刚刚敲出名字的时候,你发现这个州标的是B,根本就没有A标!!怎么办?没办法,只能把你的代码修改成这样,给B一个属性,属性值是一个函数,返回值是C标签。然后怎么办?在B标签中调音!调用时将name值放入参数中,然后在返回的C标签中直接使用,如下图:别忘了最后一步,你的C标签还没收到呢!页面效果,成功展示~一定要叫render吗?不是的,你可以随便命名,这只是程序员之间的约定。当你写render的时候,别人看了你的代码,马上就知道你代码的意思了。这就像在for循环中写入i=0,从而使众所周知的规则相互约定。添加文字拓展知识B组件,也相当于道具,需要在B组件内部接收才能使用!