复合组件使用
1. 拆分组件，确定子组件个数
3个组件：容器 标题 内容
2. 创建各个组件（从最小的组件开始创建）
class 组件名 extends React.Component{
render(){
return (
视图
)
}
}
先不考虑动态数据，先渲染静态死数据，后面再考虑动态数据
3. 在容器组件（App.js）内组合组件
import Title from 'title路径'
import Info from 'info路径'
render(){
return (
<div>
<Title />
<Info />
</div>
)
}
4. 引入最大组件(容器组件)
<App />
5. 在index内定义数据
var webSite = {title: '百度', info: '我是百度网站', href: 'http://www.baidu.com'}
6. 数据绑定到App容器上
<App title={webSite.title} info={webSite.info} href={webSite.href} />
7. App容器接收自定义属性并且传递给儿子
this.props //接收自定义属性
//用自定义属性方式来传递值
<Title title={ this.props.title } href={ this.props.href } />
<Info info={ this.props.info } />
8. 在个子组件内进行相应数据渲染
Title.js
render(){
return (
<a href={this.props.href}>{this.props.title}</a>
)
}
复合组件数据流：
单向数据流，数据永远只会从父容器到子容器进行传递
如果数据改变，会一层一层的传递下去
