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组件内部接收才可以使用!


相关文章
|
人工智能 自然语言处理 计算机视觉
Meta发布混合多模态模型—Chameleon
【8月更文挑战第5天】Meta AI团队近期发布了Chameleon,一种基于早期融合的混合多模态模型,能在任意顺序下理解和生成图像与文本。此34B参数模型经10万亿token训练,展现出卓越的多模态处理能力。Chameleon在视觉问答、图像字幕生成等任务中成绩亮眼,特别是在图像字幕生成上表现优异,文本生成上亦具竞争力,且有一定的图像生成能力。其性能在新混合模态生成评估中媲美甚至超越大型模型。尽管如此,Chameleon仍面临特定任务处理及计算资源需求等方面的挑战。论文已发布于arXiv。
300 11
|
前端开发 搜索推荐 算法
中草药管理与推荐系统Python+Django网页界面+推荐算法+计算机课设系统+网站开发
中草药管理与推荐系统。本系统使用Python作为主要开发语言,前端使用HTML,CSS,BootStrap等技术和框架搭建前端界面,后端使用Django框架处理应用请求,使用Ajax等技术实现前后端的数据通信。实现了一个综合性的中草药管理与推荐平台。具体功能如下: - 系统分为普通用户和管理员两个角色 - 普通用户可以登录,注册、查看物品信息、收藏物品、发布评论、编辑个人信息、柱状图饼状图可视化物品信息、并依据用户注册时选择的标签进行推荐 和 根据用户对物品的评分 使用协同过滤推荐算法进行推荐 - 管理员可以在后台对用户和物品信息进行管理编辑
438 12
中草药管理与推荐系统Python+Django网页界面+推荐算法+计算机课设系统+网站开发
|
11月前
|
文字识别 自然语言处理 API
Python中的文字识别利器:pytesseract库
`pytesseract` 是一个基于 Google Tesseract-OCR 引擎的 Python 库,能够从图像中提取文字,支持多种语言,易于使用且兼容性强。本文介绍了 `pytesseract` 的安装、基本功能、高级特性和实际应用场景,帮助读者快速掌握 OCR 技术。
1446 0
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
243 0
|
11月前
|
算法 安全 数据建模
2024阿里云金秋云创季,WoSign SSL证书限时大促
2024阿里云金秋云创季正式拉开活动序幕,活动月期间(2024年11月01日至11月30日)通过折扣、叠加优惠券等多种方式,阿里云WoSign SSL证书将实现优惠价格新低,DV SSL证书220元/年起,助力中小企业轻松实现HTTPS加密,保障数据传输安全。
1094 0
|
消息中间件 网络安全 RocketMQ
寻找RocketMQ首席评测官 :创建专有网络VPC操作指引
在领取RocketMQ免费试用时,会有创建VPC的过程。本文说明如何创建专有网络VPC。
2085 3
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的量化积分管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的量化积分管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
143 0
|
存储 NoSQL MongoDB
【MongoDB 专栏】MongoDB 入门指南:从零开始学习
【5月更文挑战第10天】本文介绍了MongoDB,一个流行的NoSQL数据库,以其灵活的数据模型和高性能著称。内容包括MongoDB的基础知识、安装配置、文档数据模型、数据库操作(如创建、查询、更新和删除)、索引创建、数据备份恢复及性能优化策略。此外,还探讨了MongoDB在社交网络、电子商务等领域的应用。对于初学者,本文提供了从零开始学习MongoDB的入门指导。
251 0
【MongoDB 专栏】MongoDB 入门指南:从零开始学习
|
安全 Java 数据库连接
Rpamis-security-基于Mybatis-Plugin的一站式加解密脱敏安全组件
项目是一个基于Mybatis插件开发的安全组件,旨在提供更优于市面上组件的脱敏、加解密落库等企业数据安全解决方案。组件提供注解式编程方式,开发者只需要对需要处理的字段或方法加上对应注解,无需关心安全相关需求,由组件全自动完成脱敏、加解密等功能
292 7
|
SQL 分布式计算 大数据
大数据面试题:Hive count(distinct)有几个reduce,海量数据会有什么问题
count(distinct)只有1个reduce。 为什么只有一个reducer呢,因为使用了distinct和count(full aggreates),这两个函数产生的mr作业只会产生一个reducer,而且哪怕显式指定set mapred.reduce.tasks=100000也是没用的。 当使用count(distinct)处理海量数据(比如达到一亿以上)时,会使得运行速度变得很慢,熟悉mr原理的就明白这时sql跑的慢的原因,因为出现了很严重的数据倾斜。