父组件
/*
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;
