react 父子组件

React中的组件: 解决html 标签构建应用的不足。

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

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

父子组件传值（react 父子组件通信）：

父组件给子组件传值 

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

          2.子组件里面 this.props.msg          


    说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。


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

    1、调用子组件的时候指定ref的值 <Header ref='header'></Header>      
    
    2、通过this.refs.header  获取整个子组件实例  (dom（组件）加载完成以后获取 )

父组件：Home-------
class Home extends Component {

constructor(props){
    super(props);        
    this.state={
      msg:'我是一个首页组件',
      title:'首页组件'
    }
}
render() {
  return (
    <div>        
      

        <Header title={this.state.title} />
      <br />

      <hr />

        <br />

        这是首页组件的内容
        
   
    </div>
  );
}

}

子组件：header

class Header extends Component{

constructor(props){
        super(props);   //国定写法

        this.state={

            msg:'这是一个头部组件'
        }
}

getNews=()=>{

        // alert(this.props.news.state.msg);

        this.props.news.getData();

}

render(){


    return(

        <div>

            <h2>{this.props.title}</h2>

            <button onClick={this.props.run}>调用news父组件的run方法</button>

            <br />  <br />
            <button onClick={this.props.news.getData}>获取news组件的getData方法</button>

            <br />  <br />
            <button onClick={this.getNews}>获取整个news组件实例</button>


            <br />  <br />
            <button onClick={this.props.news.getChildData.bind(this,'我是子组件的数据')}>子组件给父组件传值</button>
            
        </div>
    )
}

}

export default Header;

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

父组件：

getFooter=()=>{
      /*
        父组件主动获取子组件的数据
          1、调用子组件的时候指定ref的值 <Header ref='header'></Header>      
          2、通过this.refs.header  获取整个子组件实例  (dom（组件）加载完成以后获取 )
      */
      this.refs.footer.run();
    }

<button onClick={this.getFooter}>获取整个底部组件</button>
<Footer  ref='footer'/>

子组件：

import React, { Component } from 'react';

class Footer extends Component{
    constructor(props){
            super(props);   //国定写法
            this.state={
                msg:'我是一个底部组件'
            }
    }
    run=()=>{
        alert('我是底部组件的run方法')
    }
    render(){
        return(
            <div>
                <h2>我是一个底部组件</h2>
            </div>
        )
    }
}

export default Footer;