react父传子(以及默认值)
子组件
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父传子(以及默认值)的更多相关文章
- react组件父传子
react组件父传子,子组件使用父组件的数据,用props import React, { Component } from 'react'; class App extends Component ...
- Vue父子组件传值 | 父传子 | 子传父
父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位 splice(0,1,内容)把索引为0 ...
- vue 组件之间传值(父传子,子传父)
1.父传子 基本就用一个方式,props Father.vue(用v-bind(简写 : ) 将父组件传的值绑定到子组件上) <template> <div> 我是爸爸:{{ ...
- vue小故事之父子(上下级)通信之父传子props
vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
随机推荐
- git 暂存区问题
如果需要合别人的代码进来 需要暂时把自己的代码stash一下,用 git stash 放入暂存 如果需要释放出来用 git stash pop 当暂存用的越来越多,问题出现了需要清理暂存区队列,使用代 ...
- Solon(Spring 的替代方案)最近半年下载量突破 1200万!
不断突破 2023年04月,单月破100万(Maven 中央仓库单月下载量) 2023年06月,单月破200万 2023年11月,单月破250万 2024年11月,最近半年下载量突破 1200万 So ...
- JVM源码分析-Java运行
最近在看Java并发编程实践和Inside JVM两本书,发现如果不真正的了解底层运作,那么永远是雾里看花.因此从http://openjdk.java.net/groups/hotspot/上下载了 ...
- IT人写好简历的原则与方法
来源: 51cto 发布时间: 2010-03-19 14:49 阅读: 3270 次 推荐: 3 原文链接 [收藏] 时常,在各大论坛看到不少的朋友在张贴简历,希望得到他人的指点. ...
- LinkedList原码分析(基于JDK1.6)
<Java集合类>一文中已经最List的基本操作进行说明,并且比较了ArrayList和LinkedList的效率.本文将进一步解析LinkedList. LinkedList也和Arra ...
- 代码质量审查工具之SonarQube8.9(LTS)与gitlab CI集成使用
官网地址: https://docs.sonarqube.org/8.9/analysis/scan/sonarscanner/ 目标:在push时自动触发GitLab CI/CD pipeline ...
- mongoose中的exec()有什么用?
是什么? .exec() 和 .save() 一样是 Mongoose 的异步操作,都返回一个 thenable . 怎么用? 我们先定义一个 query 对象: const query = MyMo ...
- QEMU CVE-2021-3947 和 CVE-2021-3929 漏洞利用分析
QEMU CVE-2021-3947 和 CVE-2021-3929 漏洞利用分析 CVE-2021-3947 信息泄露漏洞 漏洞分析 漏洞点是 nvme_changed_nslist stati ...
- Node开发规范v1.0
一.空格与格式 (一)缩进 采用2个空格缩进,而不是tab缩进. 空格在编辑器中与字符是等宽的,而tab可能因编辑器的设置不同.2个空格会让代码看起来更紧凑.明快. 变量声明 永远用var声明变量,不 ...
- Dockerr安装Oracle以及使用DBeaver连接
拉取镜像 pull container-registry.oracle.com/database/free:latest 创建容器 说明一下我现在的最新版本是23 docker run -d --na ...