React中的renderProps和childrenProps

简介: React中的renderProps和childrenProps

一:废话不多说,直接开讲:

image.png

这里有三个组件,我想让B组件内展示C组件,也就是说我想让B组件成为C组件的父亲。(这不是废话吗)我这样写不就完事了吗?

image.png

但是实际工作当中,我们经常会暂时不太确定B,C组件的关系,等到最后的时候再决定,这时候我们假设B组件最后肯定是C组件的父组件。

其实React中还有第二种让C组件成为B组件子元素的方法。

你如果之前学过提前学过一些知识点话,你对这个肯定不陌生,也就是B标签的标签体内容是C标签。

image.png

但是如果你单纯这样写的话,很遗憾,页面上是不会显示C标签的

image.png

你可能会奇怪,不应该啊,这咋回事啊。

注意重点来了: 这时候你把B的爸爸忽略了吧?A标签说:你小子在我屁股底下蹦跶不管我了是吧?这时候你其实是在A标签传递给B标签的props的children属性中写内容,你爸爸给你东西,你不收也没办法展示啊,对吧?

image.png

image.png

ok,页面现在正常显示了

二:renderprops

现在展示是展示了,但是,客户需求突然变了,想让你的B标签想给C标签一个属性,叫做name,值为"方"让它在C标签中展示,这咋办呢?

你可能会想,这不就是简简单单的父亲向儿子传递数据吗?props不就完事了吗?你于是兴高采烈的打开代码,然后找到B标签

image.png

奇怪,我的C标签呢?哦,对 在A标签里,我得这样写!

image.png

当你刚刚敲下name的时候就发现了,state是B标签的,A标签压根就没有!!

这怎么办呢?

image.png

没办法,你只能修改你的代码为这样,给B一个属性,属性值为函数,并且返回值为C标签。 然后咋办?在B标签里调呗!

image.png

调用的时候,把name值放进参数里,然后在返回的C标签内直接使用,如下图:

image.png

最后一步别忘了,你C标签还没接收呢!

image.png

页面效果,成功显示~

image.png

非得叫render吗?不需要,你可以随便起名字,只不过是程序员之间的一种约定,当你写render的时候,别人看你的代码会马上知道你行代码的意思。就好比for循环里写i=0,那样互相约定俗称的规矩。

补充一下拓展知识

image.png

B组件里加文字,也相当于props,需要你在B组件内部接收才可以使用!


相关文章
|
3月前
|
Web App开发 前端开发 JavaScript
React 之 requestIdleCallback 来了解一下
React 之 requestIdleCallback 来了解一下
109 0
|
17天前
|
前端开发 JavaScript 开发者
|
1月前
|
前端开发 JavaScript 编译器
使用React
使用React
13 0
|
4月前
|
存储 前端开发 JavaScript
对于React的了解与认识
对于React的了解与认识
|
9月前
|
XML 前端开发 JavaScript
react的特点
react的特点
71 0
|
9月前
|
XML 存储 缓存
|
11月前
|
前端开发 JavaScript
React 特点
React 特点
121 0
|
11月前
|
缓存 前端开发 JavaScript
React哲学思想
React是用JavaScript构建快速响应的大型Web应用程序的首选方式。由于前端我们是无法改变加载的网速,但是我们可以通过加入view界面提示加载,这样在响应的过程中不会让用户一直处于空白界面的状态。可以调用React中Lazy&Suspence来实现。如果项目崩溃或者网络崩溃的时候,可以使用ErrorBondary,展示出自己定义渲染的“错误”的UI界面
5272 1
|
前端开发 调度
一篇必看的React文章
本文适合有 React 基础的小伙伴进阶学习
一篇必看的React文章
|
机器学习/深度学习 设计模式 前端开发
React17在我看来是这样的
本文适合觉得React难学,或者想重头系统化学习React的小伙伴。