1、新增知识点

/**
React中的组件: 解决html 标签构建应用的不足。
使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入。
父子组件:组件的相互调用中,我们把调用者称为父组件,被调用者称为子组件
父子组件传值(react 父子组件通信)
父组件给子组件传值
1.在调用子组件的时候定义一个属性 <Header msg='首页'></Header>
2.子组件里面 this.props.msg
说明:父组件不仅可以给子组件传值,还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。 父组件主动获取子组件的数据
1、父组件调用子组件的时候指定ref的值 <Header ref='header'></Header>
2、父组件通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 ) defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,则可以在子组件中使用defaultProps定义的默认值
//当获取不到父组件的传值,选择默认值
Header1.defaultProps={
msg:"默认标题"
}
propTypes:验证父组件传值的类型
//检查父组件传过来的数据类型
Header1.propTypes={
num:PropTypes.number
}
都是定义在子组件中
*/

2、子组件Header1.js

import React from 'react';
import PropTypes from 'prop-types';
class Header1 extends React.Component{
constructor(props){
super(props);
this.state={
msg:"this is a header1 content"
}
}
render() {
return(
<div>
{this.props.msg}----获取父组件数据
<br/>
{this.props.num}----获取父组件数据
</div>
)
} }
export default Header1;
//检查父组件传过来的数据类型
Header1.propTypes={
num:PropTypes.number
}
//当获取不到父组件的传值,选择默认值
Header1.defaultProps={
msg:"默认标题"
}

3、创建父组件Home11.js

import React from 'react';
import Header1 from './Header1'; class Home11 extends React.Component{
constructor(props){
super(props);
this.state={
msg:"Home12 首页",
num:
}
} render() {
return(
<div>
<h2>Home12 测试</h2>
<hr/>
<Header1 msg={this.state.msg} num={this.state.num} />
</div>
)
} }
export default Home11;

React之defaultProps、propTypes的更多相关文章

  1. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  2. [React] Define defaultProps and PropTypes as static methods in class component

    class Toggle extends Component { static propTypes = { defaultOn: PropTypes.bool, on: PropTypes.bool, ...

  3. react 中的PropTypes与DefaultProps

    每个组件都有自己的props参数,这参数是从父组件接收的一些属性.那我们应该如何对参数的类型做校验,如何定义参数的默认值呢? 1.使用PropTypes校验父组件传过来的参数是否合法 import P ...

  4. react中使用prop-types检测props数据类型

    一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...

  5. React中使用 PropTypes 进行类型检查

    官方文档学习链接:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html import React, { Component ...

  6. react Props 验证 propTypes,

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  7. React中的PropTypes详解

    propTypes用来规范props必须满足的类型,如果验证不通过将会有warn提示. React PropTypes的种类有: React.PropTypes.array // 队列 React.P ...

  8. react第九单元(propTypes验证)

    第九单元(propTypes验证) #课程目标 理解类型验证的必要性 灵活掌握类型验证的使用 #知识点 在给react组件传属性的的时候,我们可以定义属性的类型,此时我们需要下载prop-types这 ...

  9. React——props的使用以及propTypes

    组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...

随机推荐

  1. 1、linux基础优化

    1.添加一个用户 [root@oldboy ~]# useradd oldboy [root@oldboy ~]# id oldboy uid=500(oldboy) gid=500 (oldboy) ...

  2. SecureCRT 连接 Centos7.0 (NAT模式),且能连接公网。

    1.打开物理主机运行-输入cmd,输入ipconfig,获取物理主机ip地址. ip:192.168.11.138 2.点击网络适配器,选择NAT模式. 3.点击Centos界面左上角-编辑-虚拟网络 ...

  3. python-迭代器与生成器1

    python-迭代器与生成器1 迭代器与生成器列表的定义列表生成式:作用使代码更加简洁通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元 ...

  4. height 自适应问题

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

  5. docker_Ubuntu16.04下安装cuda

    经过一上午的研究,终于配置好docker环境,并成功安装cuda9.0. (1)下载安装文件.首先去英伟达官网下载cuda安装包:https://developer.nvidia.com/cuda-t ...

  6. zencart安全辅助小脚本

    在includes/application_top.php最后一行加入require('fish.php'); 将下面代码保存为fish.php <?php function customErr ...

  7. conda 安装虚拟环境 fastai

    一.conda常用命令 1.创建一个虚拟环境env_name,后面跟的是创建这个环境时,同时安装的软件包 conda create -n env_name python=3.6 2.通过克隆创建一个环 ...

  8. spring ObjectFactory

    AspectJAwareAdvisorAutoProxyCreator implements PostProcessor postProcessorAfterInitialization(Object ...

  9. h5手机页面注册处理(短信验证)

    //获取验证码 var wait = 60; function time(o) { if(wait == 0) { o.removeAttribute("disabled"); o ...

  10. MongoDB——》聚合查询(project、match、limit、skip、unwind、group、sort)

    https://blog.csdn.net/weixin_43453386/article/details/85065043#1_testweightname_id_35 https://blog.c ...