React：组件通信方式

最新推荐文章于 2024-07-27 00:10:42 发布

林夏天

最新推荐文章于 2024-07-27 00:10:42 发布

阅读量732

点赞数 1

分类专栏： React 学习笔记文章标签： react

本文链接：https://blog.csdn.net/weixin_46124214/article/details/108103259

版权

本文详细介绍了React中组件通信的四种常见方式：1) 父组件通过props向子组件传递信息；2) 子组件利用自定义事件通知父组件；3) 使用Context API进行跨级组件通信；4) 通过事件发布订阅模式实现非嵌套组件间通信。通过这些机制，开发者可以灵活地在React应用中管理组件间的交互。

摘要由CSDN通过智能技术生成

需要组件之间进行通信的几种情况

父组件向子组件通信
子组件向父组件通信
跨级组件通信
没有嵌套关系组件之间的通信

1. 父组件向子组件通信

React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息。
在这里插入图片描述

父组件PageA：

import React, {
    Component } from 'react';
import ChildA from '../components/ChildA';
class pageA extends Component {
   
    render() {
   
        return (
            <div>
                pageA
                <ChildA name="tom" />
            </div>
        );
    }
}
//函数组件：
function pageA() {
   
    return (
        <div>
            pageA
            <ChildA name="Eve" />
        </div>
    )
}
export default pageA;

子组件ChildA：

import React, {
    Component } from 'react';
class ChildA extends Component {
   
    render() {
   
        return (
            <div>
                ChildA: my name is {
   this.props.name}
            </div>
        );
    }
}
//函数组件：
function ChildA(props) {
   
    return (
        <div>
            ChildA: my name is {
   props.name}
        </div>
    )
}
export default ChildA;

2. 子组件向父组件通信

利用自定义事件，触发回调

子组件ChildA：

import React, {
    Component } from 'react';

class ChildA extends Component {
   
    constructor(props) {
   
        super(props)
        this.state = {
   data:''}
    }
    valueChange = data => {
   
        this