react中的通信

1 e.currentTarget.dataset 就可获取标签上所有的自定义属性

• eg:

import React, {Component} from "react"
class xxx extends Component {
    ...//省略代码

    fun(e){
        console.log(e.currentTarget.dataset) //就是所有的自定义的类名 ,比如可添加一个属性表示id data-id="xxx" data-xxx="xxx"
    }
}
    render(){
        return {
             <button onClick={this.fun} data-自定义类名="xxx">
        }
}
 ...//省略代码

2 事件中涉及到this，就要添加 .bind(this)

• eg:

class xxx extends Component {
   ...//省略代码
   fun(){
       this.xxx
   }
   render(){
       retrun{
           <button onClick={this.fun.bind(this)}>
       }
   }
}

3 默认值和默认属性

import propTypes from "prop-types"
class xxx extends Component {
   ...//省略代码

   //设置默认的props defaultProps是固定的值， static代表静态
   static defaultProps={
       msg:"设置的默认值" //父组件的msg如果没写
   }
   //设置类型，需要引入propTypes
   static propTypes = {
       msg:propTypes.string
   }
    ...//省略代码
}

4 通信

1 父子通信

• 父组件

class xxx extends Component {
    constructor(props){
        super(props)
        this.state={
            //正常写传递的数据 eg:
            msg:"xxx"
        }
    },
    render(){
        return{
            <child 自定义名字={this.state.msg}></child>
        }
    }
    ...//省略代码
}

• 子组件(child)

   class xxx extends Component {
     render(){
         return{
             {this.props.自定义名字}
         }
     }
     ...//省略代码
 }

2 子父通信

*** 要把子组件数据传递个父组件，就要在父组件写对应的方法，让子组件接收后调用后，传递对应的数据即可 ***
父组件

class xxx extends Component {
     constructor(props){
         super(props)
         this.state={
             //正常写传递的数据 eg:
             msg:"xxx"
         }
     }
     //eg 事件名自定义为change
     change(data){
         this.setState({
             msg:data
         })
     }
     render(){
         return{
             <child 自定义名字={this.change.bind(this)}></child>
         }
     }
     ...//省略代码
 }

• 子组件(child)

class xxx extends Component {
     fun(xx){
         //this.props.change() 调用即可
         this.props.change(xx) //调用时传入对应的要修改的数据即可
     }
     render(){
         return{
             <child 自定义名字={this.change.bind(this)}></child>
         }
     }
     ...//省略代码
 }

3 非父子通信

*** 借助 node自带的一个模块events(原生的，不需下载) ***

• bus.js

import {EventEmitter} from "events"
//new EventEmitter 生成对象

export default new EventEmitter()
//导出的new EventEmitter() 拥有emit方法和on方法

• 组件1(emit 触发)

import bus from "bus.js 的路径"


class xxx extends Component {
   ...//省略代码
   fun(){
       bus.emit("自定义事件",传递的数据)
   }
   ...//省略代码
}

• 组件2 (on 监听)

 import bus from "bus.js 的路径"

//on监听自定义事件
class xxx extends Component {
    ...//省略代码
   componentDidMount(){
       bus.on("自定义事件",(参数)=>{
           //参数就是传递过来的数据
       })
   }
    ...//省略代码
}