react的父子通信,简单明了_react class写法父子同信-程序员宅基地

技术标签: react  reactjs  

import React, { Component } from ‘react’
// 单独引入一个prop-types
import propTypes from ‘prop-types’ // 包含数据验证方法
console.log(propTypes)
// 用props父子通信
// 做一个属性验证:验证每一个属性类型
// 默认属性:不传属性的时候的默认值
class Navbar extends Component {
//props:[‘mytext’] vue写法父子通信
/*
props:{
myshow:Boolean,
mytext: String
}
/
// 关键字 做属性验证
static propTypes = {
mytext: propTypes.string, // 验证是不是字符串
myshow: propTypes.bool // 验证是不是布尔
}
// 默认属性
static defaultProps = {
myshow: true
}
render() {
return(


{/
1.这里要获取定义的元素,不加括号,这里把它当成字符串
2.
/}
{
this.props.myshow?
返回
:’’
}
{/
这里就获取了 /}
{this.props.mytext}导航栏
{
this.props.myshow?
主页
:’’
}

)
}
}
// 组件是在默认暴露的外面的,不能在组件内容定义组件,可以在组件的内部调用组件
/
父子通信
1.在(子级是在父级中调用)调用的时候传一个key的值
2.子组件中this.props.key
/
export default class prop1 extends Component {
state={
fn: true,
fn1: false
}
render() {
let obj={
mytext:‘home’,
myshow: false
}
return (

{/
// props用在父子通信,让组件的复用性大大提高
在调用子组件中定义一个key,把它它传到子组件中
/}
<div style={ {background:‘red’}}>
Home
{/
字符串的true或者false,都是为true /}
{/
/}
{/
/}
{/
key和obj的key的值是一样的,所以可以简写 */}
<Navbar {…obj}/>

<div style={ {background:‘blue’}}>
List


<div style={ {background:‘yellow’}}>
about



)
}
}

  1. List item
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43353869/article/details/106027612

智能推荐

基于C语言的小型超市库存与销售管理系统_c语言小型超市管理系统分析-程序员宅基地

文章浏览阅读464次,点赞2次,收藏7次。管理员可浏览某天的或日期区间内的所有销售记录,可对指定日期区间内的销售记录进行综合统计,统计每种商品的销量、收入,统计总收入,可通过销量、销售额筛选统计结果。管理员和售货员可对库存内商品进行销售,对销售请求进行检查,销售后对库存相应商品的余量进行更新,同时记录销售的商品信息、销售时间,更新销售记录数据文件。管理员可手动添加商品,也可从文件中批量导入商品,可查看库存内的全部商品信息,对于库存内商品数为 0 的商品可进行批量清理。管理员用户可浏览系统内所有的用户的账号、密码、权限类别,可添加用户,可删除用户。_c语言小型超市管理系统分析

没有android:padding属性,android自定义无上下padding的textview-程序员宅基地

文章浏览阅读144次。因为工作需要需要无上下padding的textview,经过查阅资料,很多说xml中的配置includefontpadding=false,但无法实现0 padding的需要。也有说通过设置负数的marginTop实现,但是不同字体,需要设置的值不同(因为自带的padding也不同),因此自己写了一个自定义的无padding类。http://blog.csdn.net/chenkai1992041..._不设置padding android

Apache Calcite 为什么能这么流行-程序员宅基地

文章浏览阅读1.5k次。这张图上列的,是直接使用 Apache Calcite 或者至少相关联的项目。大家肯定能在里面找到很多自己熟悉的项目。那 Apache Calcite 究竟是干嘛的,又为..._calcite用的人多吗

360服务器linux版,360浏览器Linux版-程序员宅基地

文章浏览阅读2.1k次。原文来自:https://bbs.360.cn/thread-15529293-1-1.html 【Ubuntu & Deepin 系统】下载链接:https://yunpan.360.cn/surl_yHYBghptmsK (提取码:347d); 【Deepin(龙芯_MIPS64) 】下载链接:https://yunpan.360.cn/surl_yFvrPRipiFU (提取码:c9..._360浏览器;inux 专业版注册码

【Android进阶笔记】事件分发机制_android 事件分发机制-程序员宅基地

文章浏览阅读135次。文章目录1. DOWN 事件的流向2. MOVE 和 UP 事件的流向2.1. dispatchTouchEvent 返回 true2.2. onTouchEvent 返回 true2.3. 总结3. setOnTouchListener1. DOWN 事件的流向【关键点】dispatchTouchEvent、onTouchEvent 返回 true:事件就停止传递了(没有谁能再收到这个事件)。dispatchTouchEvent 返回 false:事件停止往子 View 传递和分发同时开_android 事件分发机制

彻底搞懂错排问题_错牌问题-程序员宅基地

文章浏览阅读6.2k次,点赞30次,收藏35次。问题:现有10本书按照顺序摆放,现要求重新排列,使得新的书的顺序中每一本书都不在原来的位置,求有多少种排列方式?这个问题推广一下,就是错排问题,是组合数学中的问题之一。考虑一个有n个元素的排列,若一个排列中所有的元素都不在自己原来的位置上,那么这样的排列就称为原排列的一个错排。 n个元素的错排数记为D(n)。 研究一个排列错排个数的问题,叫做错排问题或称为更列问题OK,现在详细分析这个问..._错牌问题

随便推点

如何基于阿里云ECS快速搭建Docker环境_如何在阿里云esc上构建容器-程序员宅基地

文章浏览阅读597次。本教程介绍如何基于阿里云ECS快速搭建Docker环境,并使用Docker部署一个Nginx服务,通过本教程的操作,您可以基于阿里云ECS实例快速搭建一个Docker环境,并在Docker环境中部署一个Nginx服务。背景知识容器技术容器是一个允许我们在资源隔离的过程中,运行应用程序和其依赖项的 、轻量的 、操作系统级别的虚拟化技术, 运行应用程序所需的所有必要组件都打包为单个镜像,这个镜像是可以重复使用的。当镜像运行时,它是运行在独立的环境中,并不会和其他的应用共享主机操作系统的内存、CPU或_如何在阿里云esc上构建容器

编写程序C语言 用递归法求n,用C语言编写一个递归程序用来计算:1*2+2*3+3*4+.+(n-1)*n...-程序员宅基地

文章浏览阅读6.5k次。用C语言编写一个递归程序用来计算:1*2+2*3+3*4+.+(n-1)*n以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!用C语言编写一个递归程序用来计算:1*2+2*3+3*4+.+(n-1)*nint fun(int n){if(n==2){return 2;}else{return fun(n-1)+(n-1)*..._对给定的m,编写一个函数求满足1*2+2*3+3*4+..(n-1)*n<=m的最大的n。

JSP简介_jsp引擎有什么作用-程序员宅基地

文章浏览阅读2.2k次,点赞3次,收藏22次。JSP简介一,JSP引擎1,JSP引擎是指支持JSP的Web服务器或Web容器。2,JSP引擎作用是把JSP标签、JSP页中的Java代码甚至连同静态HTML内容先转换成为大块的Java代码,然后Servlet被JSP引擎自动地编译成Java字节码,最后生成的整个页面信息返回给客户端。二,JSP执行过程1,Web容器处理JSP文件请求需要经过以下阶段:① 请求:客户端向服务器发送请求② 翻译阶段:JSP文件会被Web容器中的JSP引擎转换成Java源码。③ 编译阶段:Java源码会被编译成_jsp引擎有什么作用

CodeForces 982 C Cut 'em all!-程序员宅基地

文章浏览阅读62次。Cut 'em all!题意:求删除了边之后,剩下的每一块联通块他的点数都为偶数,求删除的边最多能是多少。题解:如果n为奇数,直接返回-1,因为不可能成立。如果n为偶数,随意找一个点DFS建树记录下他的子孙+本身的个数。然后再DFS一下,对于每一个点,他的个数为偶数,就把他与父节点的边隔断, cnt++。 最后cnt就是答案。代码: 1 #include<bits/s...

zabbix-agent key属性列表_system.hw.cpu[<cpu>,<info>]-程序员宅基地

文章浏览阅读5.4w次。Key描述返回值参数详细说明agent.hostname返回被监控端名称字符串-返回配置文件中配置的被监控端的名称agent.ping检测被监控端是否存活1 - 运行中 其他 - 未运行-使用函数 nodata()检测客户端是否正在运行_system.hw.cpu[,]

Qt下libusb-win32的使用方法(转)-程序员宅基地

文章浏览阅读147次。源:Qt下libusb-win32的使用方法之前一直找不到适合WIN7下的Tiny6410的USB下载软件,正好这几天开始学习USB,所以打算自己写一个专门用于Tiny6410的WIN7下的USB下载软件。 发现了libusb这个库可以用作无驱USB开发,就是说根本不需要了解Window驱动开发的知识就可以开发USB设备驱动,只需要了解一下USB的相关协议即可。Wi..._qt win32 libusb库

推荐文章

热门文章

相关标签