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 ...
随机推荐
- 初步学习Nuxt3
Nuxt3 用于制作ssr 网页 支持vue3 所有的语法,并且支持了TypeScript, vite+vue3+composition api + ts.SPA单页面应用不能进行SEO优化,SSR应 ...
- (Python基础教程之十一)Python找到最大的N个(前N个)或最小的N个项目
Python基础教程 在SublimeEditor中配置Python环境 Python代码中添加注释 Python中的变量的使用 Python中的数据类型 Python中的关键字 Python字符串操 ...
- MongoDB学习笔记之 第1章 MongoDB的安装
MongoDB学习笔记之 第1章 MongoDB的安装 MongoDB学习笔记之 第2章 MongoDB的增删改查 MongoDB学习笔记之 第3章 MongoDB的Java驱动 MongoDB学习笔 ...
- 三、FreeRTOS学习笔记-系统配置
FreeRTOSConfig.h配置文件作用:对FreeRTOS进行功能配置和裁剪,以及API函数的使能. 系统配置文件中主要是一些宏定义 相关宏定义可分为三类: 1."INCLUDE&qu ...
- golang之http请求库go-resty
github: https://github.com/go-resty/resty go-resty 特性# go-resty 有很多特性: 发起 GET, POST, PUT, DELETE, HE ...
- elementUI 表格之表头合并
表头中有三个年份2018,2019和2020,每个年份下又有12个月份,后台返回的数据中每一个月份对应一个年份,类似下面这样 [{ year: '2018', month: '201801', }, ...
- Redis循环慢接口优化
原慢接口 List<String> keys = new ArrayList<>(Arrays.asList("1", "2", &qu ...
- 深度学习环境搭建(Windows11)
深度学习环境的搭建(Windows11) 偶然重装了系统,在此记录下环境的恢复 基本深度学习环境的搭建,包括Anaconda+CUDA+cuDNN+Pytorch+TensorRT的安装与配置. ps ...
- .NET Threadpool 饥渴,以及队列是如何使它更糟的
.NET Threadpool 饥渴,以及队列是如何使它更糟的 .NET Threadpool starvation, and how queuing makes it worse - Criteo ...
- Golang实战:深入解析国密算法在Go语言中的应用与优化
Golang实战:深入解析国密算法在Go语言中的应用与优化 引言 随着信息技术的迅猛发展,数据安全成为企业和个人关注的焦点.国密算法(SM系列算法)作为我国自主研发的密码算法标准,逐渐在各个领域中得到 ...