React 父子组件传值概要总结

一、使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。

二、父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件

三、父子组件传值：

    3.1 父组件给子组件传值 

            1. 在调用子组件的时候定义一个属性  <Header msg='首页' all={this}></Header>

            2. 子组件里面 this.props.msg   
       
            3. 子组件里面获取整个父组件 this.props.all（说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个                父组件传给子组件。）

            4. defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用

               defaultProps定义的默认值（定义在子组件里面）

           5. propTypes：验证父组件传值的类型合法性 （定义在子组件里面）

             1、引入import PropTypes from 'prop-types';

             2、类.propTypes = {
                name: PropTypes.string
            };

 

   3.2 父组件主动获取子组件的数据

        1、调用子组件的时候指定ref的值   <Header ref='header'></Header>      
        
        2、通过this.refs.header  获取整个子组件实例
    用法：
    this.refs.header.run( );  
    this.refs.header.state.title;

    3.3 举例：3.1的第4条 defaultProps和 第5 propTypes 示例如下:

import React, { Component } from 'react';

import Header from './Header';

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} />

            <hr />

            <br />

            这是父组件组件的内容            
       
        </div>
      );
    }
  }
  
  export default Home;

/*
父组件给子组件传值：


    defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用    
 defaultProps定义的默认值

    propTypes：验证父组件传值的类型合法性

            1、引入import PropTypes from 'prop-types';

            2、类.propTypes = {
                name: PropTypes.string
            };

    都是定义在子组件里面

*/


import React, { Component } from 'react';

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定义的默认值

Header.defaultProps={

    title:'标题'
}

// 同行propTypes定义父组件给子组件传值的类型

Header.propTypes={

    num:PropTypes.number
}


export default Header;