邂逅react(十)-组件通信

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

class Header extends Component{//头部组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <h2>我是头部</h2>
      </div>
    )
  }
}

class Banner extends Component{//Main中嵌套的广告组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
       <h4>我是banner</h4>
      </div>
    )
  }
}
class ShopList extends Component{//Main组件中的ShopList组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <ul>
          <li>商品1</li>
          <li>商品2</li>
          <li>商品3</li>
        </ul>
      </div>
    )
  }
}

class Main extends Component{//Main组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <h2>我是主题内容</h2>
        <Banner/>
        <ShopList/>
      </div>
    )
  }
}
class Footer extends Component{//Footer组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <h2>我是尾部</h2>
      </div>
    )
  }
}

class App extends Component{
  constructor(props){
    super(props)
  }
    render(){
      return (
        <div>
          <Header/>
          <Main/>
          <Footer/>
        </div>
      )
    }
}

页面结构

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

import SonCom from './SonCom'
class Father extends Component {
    state = {  }
    render() { 
        return ( 
            <div>
                {/* 父传子 可以直接传字符串 或者 数组 或者对象 注意：对象或数组需要放在花括号内 */}
                <SonCom data1="123" data2={[1,2,3]} data3={{name:'尚渔味烤鱼',price:'200$',weight:'800g'}}/>
            </div>
         );
    }
}
 
export default Father;

子组件

class SonCom extends Component {
   constructor(props){
        super(props)
        this.state={}
   }
    render() { 
    //解构
        const {data1,data2,data3}=this.props
        return ( 
            <div>
            <!--取字符串并展示-->
               <div>{data1}</div>
               <ul>
               <!--取数组 遍历展示-->
                   {
                       data2.map((item,index)=>{
                           return <h3 key={index}>{item}</h3>
                       })
                   }
               </ul>
               <div>
               <!--取对象-->
                    {
                        Object.keys(data3).map((item,index)=>{
                            return <h2 key={index}>{data3[item]}</h2>
                        })
                    }
               </div>
            </div>
         );
    }
}
 
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 ( 
            <div>
                <Nav toSon={index=>this.getNum(index)}/>
                <div className="content">
                    {
                    //  通过num变量切换显示的内容
                        <h2>{this.state.arr[this.state.num]}</h2>
                    }
                </div>
            </div>
         );
    }

    //父组件自定义的事件
    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 ( 
            <div>
                <ul>
                    {
                        this.state.arr.map((item,index)=>{
                            return  <li key={index} onClick={()=>{
                                //给选中的导航栏加样式
                                this.setState({num:index})
                                //通过props拿到父组件传过来的函数,并把当前的Index传给父组件
                                this.props.toSon(index)
                            }}  
                            className={this.state.num===index?'active':''}
                            >{item}</li>
                        })
                    }
                   
                </ul>
            </div>
         );
    }
    
}
 
export default Nav;

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