新闻组件，首页组件是父组件
头部组件，底部组件是子组件
构造函数中固定写法 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;
