react中类似vue的插槽this.props.children的用法
父组件
<TestHanderClick bg="blue">
<p> 如果我要显示的话,父组件是双标签,子组件中有this.props.children</p>
<div>类似于匿名插槽</div>
</TestHanderClick>
子组件
import React, { Component } from "react";
import "./base.css"
// 父组件
export class TestHanderClick extends Component {
// static defaultProps是默认的写法,人家规定这样写的,你的默认值
static defaultProps={
bg:"pink",
wi:"400px",
he:"200px"
}
render() {
return (
// 使用值
<div style={{ background: this.props.bg, width: this.props.wi, height:this.props.he }}>
123
{this.props.children}
//通过这个组件,可以获取父组件中的数据
</div>
)
}
}
export default TestHanderClick;

react中类似vue的插槽this.props.children的用法的更多相关文章
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- react 实现类似vue中的<keep-alive>的功能,并解决antd-mobile切换回来时的空白
在移动端的spa页面中,只要使用到了路由就很有必要使用到状态保存的功能,这样才能保证在页面进行切换的时候,让用户可以看到刚才滑动的地方,让用户的体验更加友好.这儿我找到了react-router-ca ...
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
- React中的Context——从父组件传递数据
简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...
- React中props
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- 前端MVVM模式及其在Vue和React中的体现
MVVM相关概念 Mvvm 前端数据流框架精讲 1) MVVM典型特点是有四个概念:Model.View.ViewModel.绑定器.MVVM可以是单向绑定也可以是双向绑定甚至是不绑定 2) 绑定器: ...
- vue中:key 和react 中key={} 的作用,以及ref的特性?
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
随机推荐
- 介绍 GGUF-my-LoRA
随着 llama.cpp 对 LoRA 支持的重构,现在可以将任意 PEFT LoRA 适配器转换为 GGUF,并与 GGUF 基础模型一起加载运行. 为简化流程,我们新增了一个名为 GGUF-my- ...
- (Python基础教程之十四)Python将tuple开箱为变量或参数
Python示例将N元素元组或序列开箱缩为N个变量的集合.将元组开箱缩为变量的 Python示例. 1. Python开箱元组示例 可以使用简单的赋值操作将任何序列(或可迭代)开箱缩为变量.唯一的要求 ...
- 浏览器实时查看日志系统-log.io
log.io 是一个实时日志监控工具,采用 node.js + socket.io 开发,使用浏览器访问,每秒可以处理超过5000条日志变动消息.有一点要指出来的是 log.io 只监视日志变动并不存 ...
- JavaScript 样式操作
1.类名操作 class类名以字符串的形式存储到标签和Dom元素的属性中,标签属性为class,Dom元素属性为className,两个属性是均支持读取和修改,修改其中的一个会同步至另一个属性 cla ...
- Flutter WebView报错ERR_NAME_NOT_RESOLVED
WebView报错ERR_NAME_NOT_RESOLVED 用的webview_flutter插件,开始都用的好好的,后面突然报错ERR_NAME_NOT_RESOLVED,上网逛了一圈说如果要用h ...
- 2.mysql授权认证
权限系统介绍 ● 什么是权限系统 权限系统是授予来自某个主机的某个用户可以查询.插入.修改.删除等数据库操作的权限 不能明确的指定拒接某个用户的连接 权限控制(授权与收回)的执行语句包括 create ...
- 【Python】conda基本使用、pip换源、pip超时问题解决
conda问题 重要警告:安装conda的时候,安装目录不要包含空格以及特殊字符,最好不要直接装在C盘根目录, 往期笔记 conda安装: https://www.cnblogs.com/mllt/p ...
- 2024年1月Java项目开发指南6:接口测试
我们使用API Fox这款工具对接口进行测试. (你要是会其他的例如postman进行测试也行) https://apifox.com/ 新建一个项目,新增一个接口 因为这个接口没有参数,所以无需填写 ...
- logback高级特性使用(二) 自定义Pattern模板
原文链接:https://blog.csdn.net/chenjie2000/article/details/8892764 创建自定义格式转换符有两步: 1.写一个转换器类,继承ClassicCon ...
- tar/zip命令加密压缩
回到顶部 场景 Centos6下使用加密压缩,可以从A机器到B机器解压. 可用在kali上解压就不行. 回到顶部 命令 解包 tar zxvf FileName.tar 打包 tar czvf Fil ...