子组件

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. VUE 前端读取excel表格内容

    <el-upload class="upload-demo" :action="''" :show-file-list="false" ...

  2. Docker Registry之删除镜像、垃圾回收

    Docker仓库在2.1版本中支持了删除镜像的API,但这个删除操作只会删除镜像元数据,不会删除层数据.在2.4版本中对这一问题进行了解决,增加了一个垃圾回收命令,删除未被引用的层数据.本文对这一特性 ...

  3. Selenium IDE使用指南一(爬虫脚本录制器)

    安装 从Chrome或Firefox网络商店安装Selenium IDE . 启动IDE 安装后,通过从浏览器菜单栏中单击其图标来启动它. 故障排除 在菜单栏中没有看到Selenium IDE的图标? ...

  4. mysql之编译安装

    在CentOS7中编译安装MySQL 5.7.29 一.依赖包安装 yum install gcc gcc-c++ ncurses ncurses-devel cmake bison -y 二.下载源 ...

  5. HTML5 A链接

    1.基本使用 a标签常用属性: 属性名 说明 href 规定链接的目标 URL target 已什么形式打开这个连接 target属性有以下几个值 属性名 说明 _self 默认,当前页面跳转 _bl ...

  6. 启动Node.js前端项目

    跟前端同事联调的时候,有时前端同事要跟其他后端同事联调,心想就自己启个前端项目,这样前端同事跟其他后端同事联调的时候,我可以先自己调来试试. 安装Node.js,NPM,NVM等,一气呵成.将前端项目 ...

  7. windows安装gitbook并部署发布到openEuler欧拉服务器

    1. 安装nodejs10 下载安装nvm https://github.com/coreybutler/nvm-windows/releases/download/1.1.9/nvm-setup.e ...

  8. WinDbg: Failed to find runtime module (coreclr.dll or clr.dll or libcoreclr.so)

    当我们通过 WinDbg 启动一个 .NET 的程序时,WinDbg 将会在运行可执行之前执行一个中断,此时还没有加载 .NET 的运行时. 但是,SOS 扩展需要 clr.dll 或者 corecl ...

  9. 在 .NET 下使用 Pdfium 渲染和打印 PDF

    在 .NET 下使用 Pdfium 渲染和打印 PDF 大家可能已经看到这条 新闻,Google最近又新推出一个开源项目,名叫 PDFium,将成为Chrome浏览器的PDF渲染引擎组件.与已有的开源 ...

  10. Android信任证书,把用户级别放入系统级别

    三.操作步骤 1.在Windows安装openssl,用来把证书转成 .pem 格式 1)下载和安装 下载其他人做的便捷版安装包:http://slproweb.com/products/Win32O ...