React之defaultProps、propTypes

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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:2
        }
    }
    render() {
        return(
            <div>
                <h2>Home12 测试</h2>
                <hr/>
                <Header1 msg={this.state.msg} num={this.state.num} />
            </div>
        )
    }
}
export  default  Home11;

以上是 React之defaultProps、propTypes 的全部内容， 来源链接： utcz.com/z/381341.html

回到顶部