父组件

 <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的用法的更多相关文章

  1. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  2. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  3. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  4. react 实现类似vue中的<keep-alive>的功能,并解决antd-mobile切换回来时的空白

    在移动端的spa页面中,只要使用到了路由就很有必要使用到状态保存的功能,这样才能保证在页面进行切换的时候,让用户可以看到刚才滑动的地方,让用户的体验更加友好.这儿我找到了react-router-ca ...

  5. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

  6. React中的Context——从父组件传递数据

    简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...

  7. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  8. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  9. 前端MVVM模式及其在Vue和React中的体现

    MVVM相关概念 Mvvm 前端数据流框架精讲 1) MVVM典型特点是有四个概念:Model.View.ViewModel.绑定器.MVVM可以是单向绑定也可以是双向绑定甚至是不绑定 2) 绑定器: ...

  10. vue中:key 和react 中key={} 的作用,以及ref的特性?

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

随机推荐

  1. 总结:OI题目中常见的三种距离

    设 \(A(x_1, y_1), B(x_2, y_2)\). 欧几里得距离 \[|AB| = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} \] 一般模型:在一个坐标系上 ...

  2. WiFi基础(八):WiFi安全、认证与加密

    liwen01 2024.11.17 前言 计算机网络在给人们带来便利的同时,也引入了安全风险,对于无线WiFi网络而言,风险更高.无线 WiFi 网络安全主要包括两大部分:接入认证和数据加密. 虽然 ...

  3. k8s之常见问题汇总

    1.服务器中的k8s已经被移除,但是磁盘依然有占用, 于是将其卸载并删除操作 [root@k8s-node2 k8s_node]# rm -rf /var/lib/kubelet rm: cannot ...

  4. seldom-platform:颠覆传统的自动化测试平台

    seldom-platform:颠覆传统的自动化测试平台 seldom-platform是一个自动化测试平台,其特点是让会写代码的测试人员能够通过seldom框架高效地完成自动化用例的编写,并将剩下的 ...

  5. VTK vtkAssembly 拾取

    在有vtkAssembly的拾取中,vtkAssembly的Pickable决定子Actor能否被拾取.跟子Actor的Pickable没有关系

  6. DDCA —— 内存一致性

    1. 同步(Synchronization) 1.1 构造锁(Locks) 原子(atomic)执行:应用程序的某些部分必须独占执行(原子性),这意味着在这些部分执行期间,其他并行进程无法访问或修改相 ...

  7. git 报错 error: bad signature 0x00000000 fatal: index file corrupt

    index file在 git 里面一般指的是 .git/index 这个文件.这个文件保存的是暂存区的信息(索引信息). 报错说明这个文件已经损坏了 直接删除这个文件,然后执行如下命令 git re ...

  8. 逍遥模拟器+Fiddler抓包 (附带软件)

    获取软件地址: 链接:https://pan.baidu.com/s/1zE9AECWOZlw_VDVMAnkBhQ?pwd=c0kq 提取码:c0kq 一.逍遥模拟器安装 1. 安装逍遥模拟器: 2 ...

  9. 【项目学习】Morpho 借贷协议简单调研

    项目背景 Morpho blue (下称 Morpho)是一个超额抵押借贷协议.与传统的借贷协议不同,Morpho 无需经过治理批准即可创建任意定制化的借贷市场.用户可以通过指定一项贷款资产.一项抵押 ...

  10. 解决httpd: Could not reliably determine the server's fully qualified domain name, using 127.0.0

    httpd: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1 for Se ...