新闻组件，首页组件是父组件

头部组件，底部组件是子组件

构造函数中固定写法    super(props); //固定写法

总结

React中的组件: 解决html 标签构建应用的不足。
使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。
父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
父子组件传值（react 父子组件通信）：父组件给子组件传值 1.在调用子组件的时候定义一个属性  <Header msg='首页'></Header>2.子组件里面 this.props.msg          说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。父组件主动获取子组件的数据1、调用子组件的时候指定ref的值 <Header ref='header'></Header>      2、通过this.refs.header  获取整个子组件实例  (dom（组件）加载完成以后获取 )

一.父组件给子组件传值。子组件获取父组件的数据

父组件引用子组件的时候，声明属性（通过构造函数）

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

子组件直接调用

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

二.父组件给子组件传方法。子组件获取父组件的方法

父组件中有一个run方法，引用子组件的时候，将run方法传递给子组件（通过构造函数传递参数为props）

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

子组件调用父组件中run方法

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

三.获取整个父组件

父组件中引用子组件时，传递自己到子组件（通过构造函数传递）

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

子组件中方法直接调用父组件对象news（this.props.news）

    getNews=()=>{// alert(this.props.news.state.msg);this.props.news.getData();}

子组件调用

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

四.子组件给父组件传值

父组件获取子组件的数据

    //获取子组件里面穿过来的数据getChildData=(result)=>{alert(result);this.setState({msg:result})}

子组件调用方法

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

五.父组件获取子组件对象

父组件中

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

父组件的方法

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

父组件引用子组件的时候

<Footer  ref='footer'/>

父组件中获取子组件的对象

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

完整代码

首页组件

import React, { Component } from 'react';/*React中的组件: 解决html 标签构建应用的不足。         使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件父子组件传值（react 父子组件通信）：父组件给子组件传值 1.在调用子组件的时候定义一个属性  <Header msg='首页'></Header>2.子组件里面 this.props.msg          说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。父组件主动获取子组件的数据1、调用子组件的时候指定ref的值 <Header ref='header'></Header>      2、通过this.refs.header  获取整个子组件实例  (dom（组件）加载完成以后获取 )*/import Header from './Header';class Home extends Component {constructor(props){super(props); //固定写法       this.state={msg:'我是一个首页组件',title:'首页组件'}}render() {return (<div>        <Header title={this.state.title} /><br /><hr /><br />这是首页组件的内容</div>);}}export default Home;

头部组件

import React, { Component } from 'react';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;

新闻页面

/*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 Footer from './Footer';class News extends Component {constructor(props){super(props);        this.state={          title:'新闻组件',msg:'我是新闻组件的msg'}}run=()=>{alert('我是父组件的run方法')}//获取子组件里面穿过来的数据getChildData=(result)=>{alert(result);this.setState({msg:result})}getData=()=>{alert(this.state.title+'getData');}//父组件主动调用子组件的数据和方法getFooter=()=>{/*父组件主动获取子组件的数据1、调用子组件的时候指定ref的值 <Header ref='header'></Header>      2、通过this.refs.header  获取整个子组件实例  (dom（组件）加载完成以后获取 )*///alert(this.refs.footer.state.msg); //获取子组件的数据this.refs.footer.run();}render() {return (<div>        <Header title={this.state.title}  run={this.run}  news={this} /><br /><hr /><br />这是新闻组件的内容---{this.state.msg}<br /><button onClick={this.getFooter}>获取整个底部组件</button><br /><hr /><br /><Footer  ref='footer'/></div>);}}export default News;

底部组件

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;