子组件

import React, { Component } from "react";
import "./base.css" // 父组件
export class TestHanderClick extends Component {
// static defaultProps是默认的写法,人家规定这样写的,你的默认值
static defaultProps={
bg:"pink",
wi:"100px",
he:"100px"
} render() {
return (
// 使用值
<div style={{ background: this.props.bg, width: this.props.wi, height:this.props.he }}>
123
</div>
)
}
} export default TestHanderClick;

父组件

 {/* 父组件传递给子组件的值 */}
<TestHanderClick bg="blue"></TestHanderClick>

react父传子(以及默认值)的更多相关文章

  1. react组件父传子

    react组件父传子,子组件使用父组件的数据,用props import React, { Component } from 'react'; class App extends Component ...

  2. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  3. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  4. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  5. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  6. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  7. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

  8. vue 组件之间传值(父传子,子传父)

    1.父传子 基本就用一个方式,props Father.vue(用v-bind(简写 : )  将父组件传的值绑定到子组件上) <template> <div> 我是爸爸:{{ ...

  9. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  10. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

随机推荐

  1. git 暂存区问题

    如果需要合别人的代码进来 需要暂时把自己的代码stash一下,用 git stash 放入暂存 如果需要释放出来用 git stash pop 当暂存用的越来越多,问题出现了需要清理暂存区队列,使用代 ...

  2. Solon(Spring 的替代方案)最近半年下载量突破 1200万!

    不断突破 2023年04月,单月破100万(Maven 中央仓库单月下载量) 2023年06月,单月破200万 2023年11月,单月破250万 2024年11月,最近半年下载量突破 1200万 So ...

  3. JVM源码分析-Java运行

    最近在看Java并发编程实践和Inside JVM两本书,发现如果不真正的了解底层运作,那么永远是雾里看花.因此从http://openjdk.java.net/groups/hotspot/上下载了 ...

  4. IT人写好简历的原则与方法

    来源: 51cto  发布时间: 2010-03-19 14:49  阅读: 3270 次  推荐: 3   原文链接   [收藏]   时常,在各大论坛看到不少的朋友在张贴简历,希望得到他人的指点. ...

  5. LinkedList原码分析(基于JDK1.6)

    <Java集合类>一文中已经最List的基本操作进行说明,并且比较了ArrayList和LinkedList的效率.本文将进一步解析LinkedList. LinkedList也和Arra ...

  6. 代码质量审查工具之SonarQube8.9(LTS)与gitlab CI集成使用

    官网地址: https://docs.sonarqube.org/8.9/analysis/scan/sonarscanner/ 目标:在push时自动触发GitLab CI/CD pipeline ...

  7. mongoose中的exec()有什么用?

    是什么? .exec() 和 .save() 一样是 Mongoose 的异步操作,都返回一个 thenable . 怎么用? 我们先定义一个 query 对象: const query = MyMo ...

  8. QEMU CVE-2021-3947 和 CVE-2021-3929 漏洞利用分析

    QEMU CVE-2021-3947 和 CVE-2021-3929 漏洞利用分析 ‍ CVE-2021-3947 信息泄露漏洞 漏洞分析 漏洞点是 nvme_changed_nslist stati ...

  9. Node开发规范v1.0

    一.空格与格式 (一)缩进 采用2个空格缩进,而不是tab缩进. 空格在编辑器中与字符是等宽的,而tab可能因编辑器的设置不同.2个空格会让代码看起来更紧凑.明快. 变量声明 永远用var声明变量,不 ...

  10. Dockerr安装Oracle以及使用DBeaver连接

    拉取镜像 pull container-registry.oracle.com/database/free:latest 创建容器 说明一下我现在的最新版本是23 docker run -d --na ...