【React】组件间四种通信方式

目录

一. 父组件向子组件通信

1.props

2. 原型方法

二 、子组件向父组件通信

三、跨级组件通信

四、非嵌套组件间通信

---

在 React 中，父子组件的通信是常见的问题，除了使用状态管理工具（redux）以外，也可以实现父子组件的相互通信。

在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：

1. 父组件向子组件通信：使用 props
2. 子组件向父组件通信：使用 props 回调
3. 跨级组件间通信：使用 context 对象
4. 非嵌套组件间通信：使用事件订阅

一. 父组件向子组件通信

1.props

import React, { Component } from 'react'
export default class Baba extends Component {
    // 第一步：提供传给子组件的数据
    state = {
        msg: ''
    }
    getMsg = (data) => {
        this.setState({
            msg: data
        })
    }
    render() {
        return (
            

                
                //第二步：给子组件标签添加属性，值为state中数据
            
        )
    }
}


export default class Erzi extends Component {
    render() {
        return (
            

                // 第三步：子组件通过props接送父组件传递的数据
                
                    接受来自父组件的值: {this.props.na