邂逅react(十)-组件通信

react组件化开发涉及到组件嵌套的问题,这就会出现组件间的通信
先以一个简单的例子展示组件间的嵌套(类组件举例)

class Header extends Component{//头部组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      

        
我是头部
      
    )
  }
}

class Banner extends Component{//Main中嵌套的广告组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      

       
我是banner
      
    )
  }
}
class ShopList extends Component{//Main组件中的ShopList组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      

        

          
商品1
          
商品2
          
商品3
        
      
    )
  }
}

class Main extends Component{//Main组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      

        
我是主题内容
        
        
      
    )
  }
}
class Footer extends Component{//Footer组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      

        
我是尾部
      
    )
  }
}

class App extends Component{
  constructor(props){
    super(props)
  }
    render(){
      return (
        

          

          

          

        
      )
    }
}

页面结构

index为主页面,里面嵌套了三个子组件,Main里又嵌套着自己的子组件,这就涉及到各个组件通信的问题
下面先简单聊聊组建通信父传子
父传子 直接在组件上绑定属性传递数据
下面简单看一个简单的例子
父组件：

import SonCom from './SonCom'
class Father extends Component {
    state = {  }
    render() { 
        return ( 
            

                {/* 父传子 可以直接传字符串 或者 数组 或者对象 注意：对象或数组需要放在花括号内 */}
                
            
         );
    }
}
 
export default Father;

子组件

class SonCom extends Component {
   constructor(props){
        super(props)
        this.state={}
   }
    render() { 
    //解构
        const {data1,data2,data3}=this.props
        return ( 
            

            
               
{data1}
               

               
                   {
                       data2.map((item,index)=>{
                           return 
{item}
                       })
                   }
               
               

               
                    {
                        Object.keys(data3).map((item,index)=>{
                            return 
{data3[item]}
                        })
                    }
               
            
         );
    }
}
 
export default SonCom;

父传子小结：父组件传子组件 可以通过在子组件里传入属性，子组件再通过props属性拿到父组件传过来的值

子传父小案例：
点击子导航栏，父组件的内容跟着变化
1.父组件定义事件，以属性的形式将这个事件传给子组件
2.子组件通过props属性拿到父组件传过来的事件,再把自己要传的数据通过这个事件传给父组件

父组件

import Nav from './components/Nav'
class TabControl extends Component {
    constructor(props){
        super(props)
        console.log(this.props)
        this.state = { 
            arr:['流行音乐','古典音乐','田园风音乐'],
            num:0
            
         }
    }
   
    render() { 
        return ( 
            

                
this.getNum(index)}/>
                

                    {
                    //  通过num变量切换显示的内容
                        
{this.state.arr[this.state.num]}
                    }
                
            
         );
    }

    //父组件自定义的事件
    getNum(index){
        console.log(index)
        //拿到子组件传过来的index赋值给num变量
        this.setState({num:index})
    }
}
 
export default TabControl;

子组件：

class Nav extends Component {
    state = { 
        arr:['流行','古典','田园风'],
        num:0
     }
     constructor(props){
         super(props)
         console.log(this.props)
     }
    render() { 
        return ( 
            

                

                    {
                        this.state.arr.map((item,index)=>{
                            return  
{
                                //给选中的导航栏加样式
                                this.setState({num:index})
                                //通过props拿到父组件传过来的函数,并把当前的Index传给父组件
                                this.props.toSon(index)
                            }}  
                            className={this.state.num===index?'active':''}
                            >{item}
                        })
                    }
                   
                
            
         );
    }
    
}
 
export default Nav;

小结：react中的父子组件通信，个人感觉父传子,子传父本质上没有区别,都是父组件通过属性把值传给子组件，子组件拿到值再进行自己的操作,可以把子传父理解成父传子的一种特殊情况(子传父，父组件给子组件通过属性传值,一般传字符串，数组，对象，等。父传子还是父组件通过属性给子组件传值，不同的是传的类型为父组件的自定义事件，子组件拿到这个自定义事件进行自己的操作，并把自己要传的值通过这个事件传给父元素~~~，父元素每次执行这个函数，就能拿到子元素传过来的值,这个就是子传父)
今天的分享完毕，感谢阅读