業務描述

在如上圖所示的頁面上我需要分別點選底下的三個圖示將中間內容部分分別替換成對應的元件，也就是在一個大元件中分別切換三個小元件
效果展示
因為是移動端，請按F12切換成移動端
思路
通過控制css屬性display:none來控制三個頁面是誰來顯示，中間主要是元件之間的通訊值得一說

實現
1 首先簡單寫好三個子元件

/*通訊錄*/
class PageChatContent extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return
 
 (
        <div className={this.props.chatShow+" "+universal.content}  >chat</div>
        )
    }
}
/*微博社交*/
class PageSocialContent extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
        <div className={this.props.socialShow+" "
 
+universal.content}>social</div>
        )
    }
}
/*朋友圈*/
class CircleSocialContent extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
        <div className={this.props.circleShow+" "+universal.content}>circle</div>
        )
    }
}
 

2將子元件填到父元件中

 return(
            <div className={universal.content+" "+universal.columnCenter}>
                    <div className={jsPage.heard}>
                        <img src={this.state.imgAddress} className={jsPage.imgStyle}></img>
                    </div>
                    <div className={jsPage.body+" "+universal.rowStartWrap}>

                        <PageChatContent chatShow={this.state.chatShow}></PageChatContent>
                        <PageSocialContent socialShow={this.state.socialShow}></PageSocialContent>
                        <CircleSocialContent circleShow={this.state.circleShow}></CircleSocialContent>

                    </div>
                    <div className={jsPage.bottom}>
                        <JsPageBottomNavigation history={this.props.history}
                                                changePage={msg=>this.changePage(msg)}
                        ></JsPageBottomNavigation>
                </div>
            </div>
        )

3 通過設定state來設定初始顯示

     this.state={

            chatShow:"",
            socialShow:jsPage.showFlag,
            circleShow:jsPage.showFlag,
            msg:""
        }

jsPage.showFlag是我設定的css

import jsPage from '../css/jsPage.css'

.showFlag{
    display: none;
}

  <PageChatContent chatShow={this.state.chatShow}></PageChatContent>
                        <PageSocialContent socialShow={this.state.socialShow}></PageSocialContent>
                        <CircleSocialContent circleShow={this.state.circleShow}></CircleSocialContent>

4 底部導航欄的實現
通過map遍歷資料生成

class JsPageBottomNavigation extends React.Component{
    constructor(props){
        super(props);
        this.changeFrom = this.changeFrom.bind(this);

    }
    render(){
        //需要遍歷生產的資料
        const posts = [
            {id: 1,  name:'chat',imgUrl:sysImg1},
            {id: 2,  name:'social',imgUrl:sysImg2},
            {id: 3,  name:'circle',imgUrl:sysImg3},

        ];
        const fromList=posts.map(
            (number)=>
                <div className={universal.columnCenter+" "+universal.content}  key={number.id}>
                    <img src={number.imgUrl} className={jsPage.imgStyle1}
                         onClick={ () =>this.props.changePage(number.name)}

                    ></img>
                </div>
                    );
        return (
            <div className={index.bottomNavigation+" "+universal.rowCenter}>
                <div className={index.fromList+" "+universal.rowCenter} >
                    {fromList}
                </div>
            </div>
        )
    }

}

5，通訊！最關鍵的部分
因為我要通過我的底部子元件的點選來改變我中間子元件的顯示內容，屬於
兄弟元件的通訊，實現方式就是將資料通過他們的共同父元件來傳遞，
也就是導航元件將資料傳到父元件，父元件再將資料傳到顯示元件
首先我在父元件定義一個方法，並將方法傳到導航元件中

 changePage(msg){
       this.setState({
           msg
       });}

注意：一定要使用箭頭函式，因為箭頭函式的this作用域始終作用於生產箭頭函式的地方，這樣我們就可以聽過讓子函式來修改元件的state裡面的值，從而達到傳值的目的，就像上面的方法中的msg要首先在state中定義

   <JsPageBottomNavigation history={this.props.history}
                                                changePage={msg=>this.changePage(msg)}
                        ></JsPageBottomNavigation>

然後，在子元件的map遍歷中每個圖示點選呼叫的方法引數都會不同，通過點選子元件不同的圖示，將會傳不同的值到父元件

  const posts = [
            {id: 1,  name:'chat',imgUrl:sysImg1},
            {id: 2,  name:'social',imgUrl:sysImg2},
            {id: 3,  name:'circle',imgUrl:sysImg3},

        ];
        const fromList=posts.map(
            (number)=>
                <div className={universal.columnCenter+" "+universal.content}  key={number.id}>
                    <img src={number.imgUrl} className={jsPage.imgStyle1}
                         onClick={ () =>this.props.changePage(number.name)}

                    ></img>
                </div>
                    );

在父元件中通過接受到不同的值，然後做出對應的處理，最後將處理好的值傳到顯示子元件，這樣就完成了元件間的通訊

 changePage(msg){
       this.setState({
           msg
       });
       console.log(msg)
       if(msg=="chat"){
           this.setState(
               {   chatShow:"",
                   socialShow:jsPage.showFlag,
                   circleShow:jsPage.showFlag, })
       }
       if(msg=="social"){
           this.setState(
               {   chatShow:jsPage.showFlag,
                   socialShow:"",
                   circleShow:jsPage.showFlag, })
       }
       if(msg=="circle"){
           this.setState(
               {   chatShow:jsPage.showFlag,
                   socialShow:jsPage.showFlag,
                   circleShow:"", })
       }
   }