React之父子间通信

父传子

import React from 'react'
//父组件
export default class Parent extends React.Component{
    constructor(){
        super()
        this.state={
            message:"i am from parent"
          }
    }
    render(){
        return(
            <div>
                <Child text={this.state.message}></Child>
            </div>
        )
    }
}
//子组件
class Child extends React.Component{
    constructor(){
        super()
    }
    render(){
        return(
            <div>{this.props.text}</div>
        )
    }
}

子传父

import React from 'react'
//父组件
export default class Parent extends React.Component{
    constructor(){
        super()
        this.state={
            message:"i am from parent"
          }
    }
    parent=(data)=>{
        console.log(data, "接收到子组件数据")
    }
    render(){
        return(
            <div>
                <Child receive={this.parent}></Child>
            </div>
        )
    }
}
//子组件
class Child extends React.Component{
    constructor(){
        super()
    }
    render(){
        return(
            <button onClick={()=>{this.props.receive("我是子组件的数据")}}>点击触发父亲的方法</button>
        )
    }
}

使用Context实现组件的跨级通信

//1.定义一个js文件，导出Context对象
import React from 'react'
const ThemeContext = React.createContext(null)
export default ThemeContext;
//---------------------引入Context对象
import React from 'react'
import ThemeContext from '@/tools/contexts'

export default class ContextComp extends React.Component {
    constructor() {
        super()
    }

    render() {
        //ThemeContext.Provider 数据的提供者，允许消费组件订阅context的变化
        //value就是给子组件暴露的数据
        return (<ThemeContext.Provider value={{name:"zhangsan"}}>
            <ThemedButton></ThemedButton>//子组件ThemedButton
        </ThemeContext.Provider>)
    }
}
//子组件ThemedButton
class ThemedButton extends React.Component {
    //这能让你使用 this.context 来消费最近 Context 上的那个值
    static contextType = ThemeContext;
    render() {
        return <div>
            <Content></Content>
            <button>{this.context.name}</button>
        </div>
    }
}
//ThemeContext.Consumer 允许我们在函数组件中使用Context
//ThemeContext.Consumer中的箭头函数的入参就是最近一个Provider所暴露的数据
function Content() {
    return (<ThemeContext.Consumer>{
        obj => {
            return <div>{obj.name}</div>
        }
    }</ThemeContext.Consumer>)
}

使用EventEmitter实现组件的通信
第一步：安装npm install events –save

//1.定义一个js文件，导出EventEmitter对象
import { EventEmitter } from 'events';
export default new EventEmitter()

//2.在需要接收数据的组件中注册事件监听
import React from 'react'
import emitter from '@/tools/events'
export default class List1 extends React.Component {
    //组件挂载完毕 添加事件监听
    componentDidMount() {
        this.eventEmitter = emitter.addListener("eventType1", (message) => {
            console.log(message, "这是list1组件")
        })
    }

    //组件卸载的时候一定要移除监听事件，否则会有内存泄漏
    componentWillUnmount(){
        emitter.removeListener(this.eventEmitter)
    }

    render() {
        return (<div>这是List1组件</div>)
    }
}
//3.在发送数据的组件中通过emitter.emit()方法发送数据
import React from 'react'
import emitter from '@/tools/events'
export default class List2 extends React.Component {

    sendMessage = () => {
        //发送数据
        emitter.emit("eventType1","来自list2的数据")  
    }

    render() {
        return (<div>
            这是List2组件
            <button onClick={this.sendMessage}>发送数据</button>
        </div>)
    }
}