React点击切换子组件

业务描述

在如上图所示的页面上我需要分别点击底下的三个图标将中间内容部分分别替换成对应的组件，也就是在一个大组件中分别切换三个小组件
效果展示
因为是移动端，请按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将子组件填到父组件中