当前位置: 首页 > news >正文

react renderProps学习记录

react renderProps学习记录

  • 1.引入
  • 2.改一下呢
  • 3.再改一下呢
  • 4.总结一下
    • 如何向组件内部动态传入带内容的结构(标签)?
    • children props
    • render props

1.引入

上代码:

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {render() {return (<div className="parent"><h3>我是Parent组件</h3><A/></div>)}
}class A extends Component {render() {console.log(this.props);return (<div className="a"><h3>我是A组件</h3></div>)}
}

结果很简单就能猜到
在这里插入图片描述
改一下呢:

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {render() {return (<div className="parent"><h3>我是Parent组件</h3><A>Hello !</A></div>)}
}class A extends Component {render() {console.log(this.props);return (<div className="a"><h3>我是A组件</h3></div>)}
}

页面是没有现实Hello !的,但是之前一次的封装NaLink也有传递过标签体内容的,在子组件的props中,children:(内容)
在这里插入图片描述
所以A组件想要展示传递的标签体内容的话,还要改一下A组件

class A extends Component {render() {console.log(this.props);return (<div className="a"><h3>我是A组件</h3>{this.props.children}</div>)}
}

在这里插入图片描述

2.改一下呢

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {render() {return (<div className="parent"><h3>我是Parent组件</h3><A><B/></A></div>)}
}class A extends Component {state ={ name:'Mike'}render() {console.log(this.props);return (<div className="a"><h3>我是A组件</h3>{this.props.children}</div>)}
}class B extends Component {render() {console.log('B--render');return (<div className="b"><h3>我是B组件</h3></div>)}
}

A,B组件成了父子组件
在这里插入图片描述
但是这样,如果A组件想传自己的值给B组件,貌似是行不通的

3.再改一下呢

import React, { Component } from 'react'
import './index.css'
import C from '../1_setState'export default class Parent extends Component {render() {return (<div className="parent"><h3>我是Parent组件</h3><A render={(name) => <B name={name}/>} /></div>)}
}class A extends Component {state ={ name:'Mike'}render() {const {name} =this.state;console.log(this.props);return (<div className="a"><h3>我是A组件</h3>{this.props.render(name)}</div>)}
}class B extends Component {render() {console.log('B--render');return (<div className="b"><h3>我是B组件,接收到的name:{this.props.name}</h3></div>)}
}

主要是Parent组件和A组件之间调用要注意:
在这里插入图片描述
Parent组件中,render(当然可以去其他的名字这里)这样写,相当于预留了一个插槽,如果你需要渲染其他组件(例如例子中的B组件),在A组件中调用this.props.render()就可以渲染出B组件,不写的话就不会渲染出B组件

4.总结一下

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

Vue中:
使用slot技术, 也就是通过组件标签体传入结构
React中:
使用children props: 通过组件标签体传入结构
使用render props: 通过组件标签属性传入结构, 一般用render函数属性

children props

<A><B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到 

render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data} 

相关文章:

react renderProps学习记录

react renderProps学习记录1.引入2.改一下呢3.再改一下呢4.总结一下如何向组件内部动态传入带内容的结构(标签)?children propsrender props1.引入 上代码&#xff1a; import React, { Component } from react import ./index.css export default class Parent extends Com…...

关于tf.gather函数batch_dims参数用法的理解

关于tf.gather函数batch_dims参数用法的理解0 前言1. 不考虑batch_dims2. 批处理(考虑batch_dims)2.1 batch_dims12.2 batch_dims02.3 batch_dims>22.4 batch_dims再降为12.5 再将axis降为12.6 batch_dims<02.7 batch_dims总结3. 补充4. 参数和返回值5. 其他相关论述6. 附…...

日常操作linux常用命令

cd /mnt/opt/cqstt/logs/stt-erp docker logs -f --tail1000 stt-erp # 查看物理CPU个数 cat /proc/cpuinfo| grep "physical id"| sort| uniq| wc -l # 查看每个物理CPU中core的个数(即核数) cat /proc/cpuinfo| grep "cpu cores"| uniq # 查看逻辑CPU的…...

【Java集合框架】篇二:Collection接口方法

JDK不提供此接口的任何直接实现类&#xff0c;而是提供更具体的子接口&#xff08;如&#xff1a;Set和List&#xff09;去实现。 Collection 接口是 List和Set接口的父接口&#xff0c;该接口里定义的方法既可用于操作 Set 集合&#xff0c;也可用于操作 List 集合。方法如下…...

PHP入门指南:简单易学的语法和丰富的调试工具与安全性最佳实践

PHP是一种非常流行的服务器端编程语言&#xff0c;它被广泛地应用于Web开发中。如果您想学习Web开发&#xff0c;那么PHP是一个非常好的选择。在本文中&#xff0c;我将介绍PHP的一些基础知识&#xff0c;包括语法、变量、函数、数组、数据库连接、调试和安全性等。PHP的语法PH…...

前端面试题--HTML篇

一、src和href的区别src指向外部资源的位置&#xff0c;指向的内容会嵌入到文档中当前标签所在的位置&#xff1b;href指向网络资源的位置&#xff0c;建立和当前元素或当前文档之间的链接。二、对HTML语义化的理解根据内容的结构化&#xff0c;选择合适的标签。优点&#xff1…...

SpringBoot集成ElasticSearch,实现模糊查询,批量CRUD,排序,分页,高亮

导入elasticsearch依赖在pom.xml里加入如下依赖&#xff1a;<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency>非常重要&#xff1a;检查依赖版本…...

常用Swagger注解汇总

常用Swagger注解汇总 前言 在实际编写后端代码的过程中&#xff0c;我们可能经常使用到 swagger 注解&#xff0c;但是会用不代表了解&#xff0c;你知道每个注解都有什么属性吗&#xff1f;你都用过这些属性吗&#xff1f;了解它们的作用吗&#xff1f;本文在此带大家总结一下…...

关于 TypeScript 声明文件

declare var 声明全局变量declare function 声明全局方法declare class 声明全局类declare enum 声明全局枚举类型declare namespace 声明&#xff08;含有子属性的&#xff09;全局对象interface 和 type 声明全局类型export 导出变量export namespace 导出&#xff08;含有子…...

SpringBoot学习-原理篇

SpringBoot原理篇springboot技术本身就是为了加速spring程序的开发的&#xff0c;可以大胆的说&#xff0c;springboot技术没有自己的原理层面的设计&#xff0c;仅仅是实现方案进行了改进。将springboot定位成工具&#xff0c;你就不会去想方设法的学习其原理了。就像是将木头…...

目标检测YOLOv5数据集怎么找?

完整的配置-标注-训练-识别在我这篇博客小白YOLOv5全流程-训练实现数字识别_yolov5数字识别_牛大了2022的博客-CSDN博客 模型部分剖析可以看我每周深度学习笔记部分。关于训练的数据集怎么搞很多人问过我&#xff0c;我在这篇文章给大家一点我的经验和建议。 数据集是什么 简…...

安卓短信自动填充踩坑

安卓短信自动填充踩坑 前言 最近弄了个短信自动填充功能&#xff0c;一开始觉得很简单&#xff0c;不就是动态注册个广播接收器去监听短信消息不就可以了吗&#xff1f;结果没这么简单&#xff0c;问题就出在机型的适配上。小米的短信权限、荣耀的短信监听都是坑&#xff0c;…...

【抽象类和接口的区别】

抽象类和接口都是Java中实现多态的机制&#xff0c;它们都是用来约束子类必须要实现的方法。但是它们有以下区别&#xff1a; 实现方式 实现方式&#xff1a;抽象类是一个类&#xff0c;而接口是一个接口。一个类只能继承一个抽象类&#xff0c;但可以实现多个接口。 构造方…...

接口导出文件功能

1.写接口 export function getExport(params) { return fetch({ url: ******.export, method: post, data: params, responseType:blob, }) } 2.编写前端页面 <el-button :loading"exportDisable" :disabled&quo…...

深圳大学计软《面向对象的程序设计》实验9 期中复习

A. 机器人变身&#xff08;类与对象&#xff09;【期中模拟】 题目描述 编写一个机器人类&#xff0c;包含属性有机器名、血量、伤害值、防御值、类型和等级。其中血量、伤害和防御和等级、类型相关&#xff1a; 普通型机器人&#xff0c;类型为N&#xff0c;血量、伤害、防…...

python之异步编程

一、异步编程概述 异步编程是一种并发编程的模式&#xff0c;其关注点是通过调度不同任务之间的执行和等待时间&#xff0c;通过减少处理器的闲置时间来达到减少整个程序的执行时间&#xff1b;异步编程跟同步编程模型最大的不同就是其任务的切换&#xff0c;当遇到一个需要等…...

为什么很多计算机专业大学生毕业后还会参加培训?

基于IT互联网行业越来越卷的现状&#xff0c;就算是科班出身&#xff0c;很多也是达不到用人单位的要求。面对这样的现实情况&#xff0c;有的同学会选择继续深造&#xff0c;比如考个研&#xff0c;去年考研人数457万人次&#xff0c;可见越来越的同学是倾向考研提升学历来达到…...

JUC并发编程之JMM_synchronized_volatile

目录 JUC并发编程之JMM_synchronized_volatile 什么是JMM模型&#xff1f; JMM和JVM的区别 JMM不同于JVM内存区域模型 主内存 工作内存 Java内存模型与硬件内存架构的关系 JMM存在的必要性 数据同步八大原子操作 同步规则分析 并发编程的可见性&#xff0c;原子性与有序…...

hashCode 和 equals 的处理

文章目录hashCode 和 equals 的处理1. 阿里巴巴编程规范要求2. equals和hashcode的分析2.1 Object方法2.2 只覆写&#xff08;Override&#xff09;equals带来的问题问题演示问题分析问题处理hashCode 和 equals 的处理 1. 阿里巴巴编程规范要求 2. equals和hashcode的分析 2…...

17. OPenGL实现旋转移动物体

1. 说明&#xff1a; 整体思路&#xff1a;如果想实现动态&#xff0c;可以使用一个矩阵和我们给定的坐标值进行相乘&#xff0c;实时的改变坐标值 类似于坐标的齐次变换&#xff0c;然后使用一个定时器&#xff0c;在规定时间内触发重新绘制的函数。 实际效果&#xff1a; OP…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...