react复合组件的使用

复合组件使用

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>

        )

    }

复合组件数据流：

    单向数据流，数据永远只会从父容器到子容器进行传递

    如果数据改变，会一层一层的传递下去