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 属性 一句话概括就是 ...
随机推荐
- RL 基础 | 如何复现 PPO,以及一些踩坑经历
最近在复现 PPO 跑 MiniGrid,记录一下- 这里跑的环境是 Empty-5x5 和 8x8,都是简单环境,主要验证 PPO 实现是否正确. 01 Proximal policy Optimi ...
- 结合反射与 XML 实现 Java 编程的动态性
反射是 Java 语言被视为动态或准动态语言的一个关键性质,结合反射和 XML 会帮助我们更快.更方便地实现一些动态代码,从而解决编程中可能遇到的不确定问题.本文将结合反射与 XML 对 Java 编 ...
- NOIP 备赛:CF 2E 板刷
从 \(2024.11.05\) 之前的比赛排着刷. CF2028 E 这道题主要考察的是手玩能力和转移技巧. 给定一棵树,根为 \(1\).爱丽丝的起点位于某个顶点 \(v\) .她想走出洞口,但不 ...
- 十亿手机号去重-BitSet
思路:使用Java自带BitSet函数,将手机号分为两段(15555555555 -> 155+55555555) public class demo { public static void ...
- Vue.js axios
1.安装与引入 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,官方文档 在HTML文件中引入 <script src="https:/ ...
- 阿里巴巴LangEngine开源了!支撑亿级网关规模的高可用Java原生AI应用开发框架
LangEngine作为阿里集团内部发起的纯Java版本的AI应用开发框架,经过充分实践,已经广泛应用于包括淘宝.天猫.阿里云.爱橙科技.菜鸟.蚂蚁.飞猪.1688.LAZADA等在内的多个业务场景. ...
- 盘点一下在swagger中一些有用且经常忽略的属性
震惊!,这些Swagger的属性你都了解吗? 盘点一下在swagger中一些有用且经常忽略的属性 启用永久授权EnablePersistAuthorization app.UseSwaggerUI(c ...
- 使用ProWindow时,控制按钮状态的说明
在Pro SDK中,提供了一个默认的窗口基类,ProWindow Class,提供了基础的窗体样式,可供扩展和调用. 有网友问我,在使用时,会发现窗体右上角的控制按钮,有时会没有按照自己的预期显示. ...
- 《前端运维》二、Nginx--2请求处理流程及核心模块
前一篇内容,我们学习了nginx的一些基本概念.安装和目录的作用.这篇文章我们来学习一些更加深入的内容. 一.Nginx请求处理流程 我们先来看张图吧: 我们看上图,首先客户端请求到Nginx服务器, ...
- 8.mysql表分区
MySQL表分区 表分区是将⼀个表的数据按照⼀定的规则⽔平划分为不同的逻辑块,并分别进⾏物理存储,这个规则就叫做分区函数,可以有不同的分区规则 5.7可以通过show plugins语句查看当前MyS ...