美文网首页
组件通信

组件通信

作者: Live_60c3 | 来源:发表于2018-09-03 21:37 被阅读0次

    一、React组件通讯:

    1.父传子
    2.子传父
    3.兄弟之间
    

    第一种:父传子

      第一步:在父组件(App.js)引入子组件(tab.js)
         例如:import TabCom from './pages/tab'
         
     第二步:在父组件向子组件传递数据
        例如:<TabCom info={ { num:2400,title:'1603A-ok'  } } ></TabCom>
    
      第三步:子组件如何接收父组件的数据 (主要通过 this.props.属性名实现)
       
       例如:
            let {num,title}=this.props.info
            console.log('父组件num的值为:',num);
            console.log('父组件title的值为:',title);
    

    第二种:子传父

    // Vue实现的子传父 this.$emit('派发的自定义事件',要传递给父组件的数据)
    
     //React还是通过this.props来实现的,具体是通过传递一个回调函数实现
       第一步:在父组件(App.js)引入子组件(tab.js)
         例如:import TabCom from './pages/tab'
         
      第二步:在父组件向子组件传递一个回调函数 例如:sendValue() {....}
      
        例如:
                <TabCom 
                  send={ this.sendValue.bind(this)} 
                  >
                  
    
                </TabCom>
    
      第三步:子组件如何接收父组件的函数(主要通过 this.props.回调函数名实现)
    
       例如:
             this.props.send(要传递给父组件的值)
    

    第三种:兄弟之间(也称非父子)

     1.通过公共组件作为桥梁,来实现兄弟通讯
    
     2.通过Redux来实现
    

    ReactDOM.render(<Main />,要插入的位置);

    1.如何定义父子通讯的默认属性:defaultProps={ }

     组件内定义
     
        static defaultProps={
              默认属性:值 
       }
      组件外定义:
    
        组件名.defaultProps={
            默认属性:值 
       }   
    
    
    2. 函数式组件肯定是无状态组件,类组件可以是无状态组件也可以是有状态组件
    

    生命周期:????

    props和state的区别:

        state:(对内)针对组件内部的状态,组件外外部是访问不到的
    props:(对外)是组件之间访问时用到的,组件内部可以通过props来访问到另一个组件的数据
    
    原则:多用props,少用state
    

    相关文章

      网友评论

          本文标题:组件通信

          本文链接:https://www.haomeiwen.com/subject/ygziwftx.html