【React全家桶】react组件通信

原创

已于 2023-02-19 11:22:33 修改 · 1.4k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-02-17 21:51:48 首次发布

文章详细介绍了React中组件间通信的方法，包括父子组件间的通信（通过props、回调函数和事件冒泡）以及非父子组件间的通信（状态提升、发布订阅模式和使用ContextAPI）。示例代码展示了如何在不同场景下进行组件间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🎞️🎞️🎞️ 博主主页：糖－O－

👉👉👉 react专栏：react全家桶

🌹🌹🌹希望各位博主多多支持！！！

组件通信的方式

1. 父子组件通信方式

✨父子组件之间的通信很常见，其中父组件可以通过props，原型方法向子组件通信，同时子组件也可以用回调函数，事件冒泡向父组件通信

（1）父传子

原型方法

父组件通过React.createRef()创建Ref，保存在实例属性myRef上。父组件
中，渲染子组件时，定义一个Ref属性，值为刚创建的myRef。

父组件调用子组件的myFunc函数，传递一个参数，子组件接收到参数，打印出参数。

this.props

name作为props由父组件传递给子组件，子组件拿到name后，渲染在页面上。参数有父组件传递给子组件

import React, {
   
    Component, Fragment } from 'react';

class Son extends Component {
   
   
    myFunc(name) {
   
   
        console.log(name);
    }
    render() {
   
   
        return <></>;
    }
}
// 父组件
export default class Father extends Component {
   
   
    constructor(props) {
   
   
        super(props);
        // 创建Ref，并保存在实例属性myRef上
        this.myRef = React.createRef();
    }
    componentDidMount() {
   
   
        // 调用子组件的函数，传递一个参数