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>

        )

    }

複合元件資料流：

    單向資料流，資料永遠只會從父容器到子容器進行傳遞

    如果資料改變，會一層一層的傳遞下去