zoukankan      html  css  js  c++  java
  • React父子传值中propTypes defaultProps

    /*
    
    React中的组件: 解决html 标签构建应用的不足。         
    
    使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入。
    
    父子组件:组件的相互调用中,把调用者称为父组件,被调用者称为子组件
    
    父子组件传值(react 父子组件通信):
    
        父组件给子组件传值 
    
                1.在调用子组件的时候定义一个属性  <Header msg='首页'></Header>
    
                2.子组件里面 this.props.msg          
    
    
            说明:父组件不仅可以给子组件传值,还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。
    
    
        父组件主动获取子组件的数据
    
            1、调用子组件的时候指定ref的值 <Header ref='header'></Header>      
            
            2、通过this.refs.header  获取整个子组件实例  (dom(组件)加载完成以后获取 )
    */
    
    
    import React, { Component } from 'react';
    
    import Header from './Header';
    
    import '../assets/css/index.css';
    
    class Home extends Component {
    
        constructor(props){
            super(props);        
            this.state={ 
              title:'首页组件',
              count:20
            }
        }
        render() {
          return (
            <div>                  
    
                {/* <Header title={this.state.title}  /> */}
    
    
                 {/* <Header/>  */}
    
    
                  {/* <Header title={this.state.title} num='aaaaaaaaaaaaa' />  */}
    
    
                  <Header title={this.state.title} num={this.state.count} />
              <br />
    
              <hr />
    
                <br />
    
                这是首页组件的内容
                
           
            </div>
          );
        }
      }
      export default Home;
      
    import React, { Component } from 'react';
    /*
    父组件给子组件传值:
        defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值
        propTypes:验证父组件传值的类型合法性
    
                1、引入import PropTypes from 'prop-types';
    
                2、类.propTypes = {
                    name: PropTypes.string
                };
        都是定义在子组件里面
    https://reactjs.org/docs/typechecking-with-proptypes.html
    */
    import PropTypes from 'prop-types';
    class Header extends Component {
        constructor(props) {
            super(props);
            this.state = { 
    
                msg:"我是一个头部组件"
             };
        }
        render() {
            return (
                <div>
                    <h2>---{this.props.title}--- {this.props.num}</h2>
                </div>
            );
        }
    }
    
    //defaultProps   如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值
    Header.defaultProps={
    
        title:'标题'
    }
    
    //同行propTypes定义父组件给子组件传值的类型
    
    Header.propTypes={
    
        num:PropTypes.number
    }
    
    
    export default Header;
  • 相关阅读:
    Leetcode NO.110 Balanced Binary Tree 平衡二叉树
    Leetcode NO.226 Invert Binary Tree 翻转二叉树
    Leetcode NO.215 Kth Largest Element In An Array 数组中的第K个最大元素
    根据特征的浏览器判断
    Cygwin在打开在当前目录
    【转帖】科学对待 健康养猫 打造快乐孕妇
    解决chrome浏览器安装扩展、应用程序一直处在“检查中”的问题
    对【SQL SERVER 分布式事务解决方案】的心得补充
    关于“点击这里继续访问您选择的百度XXX”
    VBA一例:如何保持文本框焦点
  • 原文地址:https://www.cnblogs.com/loaderman/p/11555876.html
Copyright © 2011-2022 走看看