react中父传子，子传父和非父子通信

一.父子组件之间通信

1.父传子

父组件: 通过自定义属性进行传值
子组件: 通过this.props接收数据

父组件
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
    state = {
        name:'赵丽颖',
        age:30,
    }
    render() {
        const {name,age} = this.state;
        return (
            <div className="alert alert-info">
                <h1>父组件</h1>
                <div>name的值为:{this.state.name}</div>
                <div>age的值为:{this.state.age}</div>
                <Child name={name} age={age} />
            </div>
        )
    }
}

子组件
import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        console.log(this.props);
        return (
            <div className="well">
                <h1>子组件</h1>
                <div>hahah</div>
                <div>name的值为:{this.props.name}</div>
                <div>age的值为:{this.props.age}</div>
            </div>
        )
    }
}

2.子传父

子组件: 通过this.props触发自定义事件,将状态数据作为参数的形式进行传递
父组件: 通过自定义方法 接收数据

子组件
import React, { Component } from 'react'

export default class Child extends Component {
    constructor(){
        super()
        this.state = {
            msg:'唧唧复唧唧',
        }
    }
    send(){
        // console.log(this.props);
        this.props.message(this.state.msg);
    }
    render() {
        // console.log(this.props);
        return (
            <div className="well">
                <h1>子组件</h1>
                <div>name的值为:{this.props.name}</div>
                <div>age的值为:{this.props.age}</div>
                <div>msg的值为:{this.state.msg}</div>
                <button className="btn btn-success" onClick={()=>this.send()}>发送</button>
            </div>
        )
    }
}

父组件
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
    state = {
        name:'赵丽颖',
        age:30,
        getChildMsg:''
    }
    render() {
        const {name,age,getChildMsg} = this.state;
        return (
            <div className="alert alert-info">
                <h1>父组件</h1>
                <div>name的值为:{this.state.name}</div>
                <div>age的值为:{this.state.age}</div>
                <div>子组件的msg的值为:{getChildMsg}</div>
                <Child name={name} age={age} message={(e)=>this.getMessage(e)} />
            </div>
        )
    }
    getMessage(e){
        // console.log(e);
        this.setState({getChildMsg:e})
}
}

3.非父子

1. 通过父传子及子传父间接的实现非父子之间传值

   缺点: 当业务变得非常复杂时,该方法不可采取.

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBOttNA6-1620802178714)(C:\Users\Administrator\Desktop\1116\day17-生命周期\code\media\非父子组件通信.gif)]

2.通过自定义事件的方法实现非父子之间的通信

网站:https://www.npmjs.com/

通过events来实现:

实现步骤:

一.安装events

cnpm i events --save

二.得到ee对象

// 引入events
var EventEmitter = require('events')
// 实例化
var ee = new EventEmitter()

// 导出
export default ee;

三.触发自定义事件

 // 触发自定义事件
ee.emit('message',this.state.msg);

三.监听自定义事件

 ee.on('message',(e)=>{
     this.setState({msg:e})
 })