组件通信(react)

• React 中组件之间的通信分为三种情况：

• 父组件给子组件传值：Props

• 子组件给父组件传值：回调函数

• 非父子组件之间传值：事件总线

一、子组件给父组件传值
React 中要实现子组件给父组件传值，需要先让父组件通过 props 传递一个函数给子组件，然后在子组件中调用该函数，并将数据传递给父组件。

1、父组件传递函数给子组件

export default class Parent extends Component {
    state = {
        name: ''
    }
    getChildData = (childData) => {
        this.setState({
            name: childData
        })
    }
    render() {
        return (
            <div>
                <h1>父组件</h1>
                <p>父组件接收到的数据：{this.state.name}</p>
                <Child getChildData={this.getChildData}></Child>
            </div>
        )
    }
}

2、子组件调用方法并传值
子组件中通过 props 可以接收到父组件传递的函数：

export default class Child extends Component {
    state = {
        name: '张三'
    }
    render() {
        console.log(this.props);
        return (
            <div>
                <button onClick={() => this.props.getChildData(this.state.name)}>按钮</button>
            </div>
        )
    }
}

二、非父子组件之间传值
1、下载 events

yarn add events
npm i events

2、创建文件
创建一个 events.js 文件，在该文件中生成事件总线：

import { EventEmitter } from 'events';
export default new EventEmitter();

3、添加事件
在负责接收数据的组件中，给事件总线身上添加事件：

import event from './events.js'

export default class ChildB extends Component {
    state = {
        name: ''
    }
    // 组件挂载完成
    componentDidMount()     {
        // 给事件总线添加事件
        event.addListener('getData', (data) => {
            // console.log(data);
            this.setState({
                name: data
            })
        })
    }
    render() {
        return (
            <div>
                <h1>子组件B：负责接收数据</h1>
                <p>接收到的数据：{this.state.name}</p>
            </div>
        )
    }
}

4、调用事件
在负责传递数据的组件中，去调用事件总线身上的事件：

import event from './events.js'

export default class ChildA extends Component {
    state = {
        name: '张三'
    }
    sendData = () => {
        event.emit('getData', this.state.name)
    }
    render() {
        return (
            <div>
                <h1>子组件A：负责传递数据</h1>
                <button onClick={this.sendData}>按钮</button>
            </div>
        )
    }
}