React入門---組件嵌套-5

組件嵌套

我們現在需要組件嵌套，所以要創建其他組件，目前有一個頭部組件，在./components/header.js;

接下來在components文件中創建：底部組件footer.js 和主體組件BodyIndex.js

項目框架應該為：

底部組件footer.js 和主體組件BodyIndex.js代碼編譯：

1. header.js (之前有編譯過)

import React from 'react';
import ReactDOM from 'react-dom';
 //創建一個類 ComponentHeader 相當於繼承react里component的子類
 //export default 輸出這個類
export default class ComponentHeader extends React.Component{
    //render() 解析類的一個輸出
    render(){
        return(
                <div>
                    <h1>這是頭部</h1>
                </div>
            );
    }
}

2. footer.js

import React from 'react';
import ReactDOM from 'react-dom';

export default class ComponentFooter extends React.Component{
    render(){
        return(
                <div>
                    <h1>這里是底部</h1>
                </div>
            )
    }
}

3.BodyIndex.js

import React from 'react';
import ReactDOM from 'react-dom';

export default class BodyIndex extends React.Component{
    render(){
        return(
                <div>
                    <h1>這里是主體內容部分</h1>
                </div>
            )
    }
}

將這個三個組件都編譯好之后，與Index.js進行關聯

4. Index.js

var React = require('react');
var ReactDOM = require('react-dom');
//把剛才定義的頭部引用進來 from后面寫路徑
import ComponentHeader from './components/header'; 
//把剛才定義的底部引用進來 from后面寫路徑
import ComponentFooter from './components/footer.js';
//把剛才定義的主體引用進來 from后面寫路徑
import BodyIndex from './components/BodyIndex.js';

class Index extends React.Component{
    //在這里解析類
    render(){
        return(
            //里面分別是 頭部 主體 底部
            <div>
                <ComponentHeader/> 
                <BodyIndex/>       
                <ComponentFooter/> 
            </div>
            );
    }
}
//與app.html進行一個綁定 
ReactDOM.render(<Index/>,document.getElementById('test'));

最后，在CMD里面進入項目文件夾，運行webpack-dev-server 即可實現簡單的組件嵌套。

 

組件嵌套可以用變量代替：

render(){
        var component = <ComponentHeader/>;
        return(
            //里面分別是 頭部 主體 底部
            <div>
                {component}
                <BodyIndex/>       
                <ComponentFooter/> 
            </div>
            );
    }

這個和上面顯示出來的是一樣的；

問題：那用變量代替有什么用呢？

　　例如：可以進行登錄和未登錄的一個試圖切換，下面寫一段偽代碼，加強理解

render(){
        var component;
            if(用戶已登錄){
                //已登錄
                component = <ComponentLoginHeader/>
            }else{
                //未登錄
                component = <ComponentHeader/>
            }

        return(
            //里面分別是 頭部 主體 底部
            <div>
                {component}
                <BodyIndex/>       
                <ComponentFooter/> 
            </div>
            );
    }

這樣一來，我們就能發現組件化開發的好處，代碼簡潔，各自組件管理各自邏輯的處理，比如頁腳變更，只需進行footer.js里面一處的修改，整個項目引用了的地方都會進行變更，這是一個非常好的思想，也是React的一個重點。