【react从入门到精通】React父子组件通信方式详解（有示例）

已于 2023-05-29 15:42:28 修改
阅读量1k 收藏 33
点赞数 33
分类专栏： react从入门到精通 文章标签： react.js javascript 前端 父子组件通信 react组件通信
于 2023-05-05 14:25:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010494753/article/details/130503848
版权
本文详细介绍了React中四种常见的父子组件通信方式：通过props直接传递，使用state进行状态管理，通过回调函数传递数据，以及利用ReactContext实现跨层级的组件通信。每个方法都有其适用场景，开发者可以根据实际需求选择合适的方式。
摘要由CSDN通过智能技术生成

文章目录


在这里插入图片描述

人工智能福利文章

前言

在上一篇文章《JSX详解》中我们了解了什么是jsx以及jsx的语法规则。

本文中我们将详细了解React父子组件通信方式。

React技能树

React 技能树
├── JSX
│   ├── 语法
│   ├── 元素渲染
│   ├── 组件
│   ├── Props
│   ├── State
│   └── 生命周期
├── 组件通信
│   ├── 父子组件通信
│   ├── 兄弟组件通信
│   ├── 跨级组件通信
│   ├── Context
│   └── Redux
├── 样式
│   ├── 内联样式
│   ├── CSS Modules
│   └── Styled Components
├── 路由
│   ├── React Router
│   ├── 动态路由
│   └── 嵌套路由
├── 数据请求
│   ├── Axios
│   ├── Fetch
│   └── GraphQL
├── 状态管理
│   ├── Redux
│   ├── MobX
│   └── Recoil
├── 常用库和框架
│   ├── Ant Design
│   ├── Material UI
│   ├── Bootstrap
│   ├── Semantic UI
│   └── Tailwind CSS
├── 测试
│   ├── Jest
│   ├── Enzyme
│   └── React Testing Library
├── 构建工具
│   ├── Webpack
│   └── Parcel
└── 服务端渲染
    ├── Next.js
    └── Gatsby

通过 props 实现父子组件通信

React 组件之间的数据传递通常是通过 props 实现的。组件可以将数据作为 props 属性传递给其子组件，然后子组件可以使用这些数据来进行渲染或执行操作。

在下面的示例中，我们将展示如何通过 props 实现父子组件之间的通信。

我们创建一个包含两个组件的简单 React 应用程序：一个父组件 Parent 和一个子组件 Child。父组件有一个按钮，点击按钮将触发一个事件，事件将向子组件传递一个字符串类型的消息。子组件将通过 props 属性接收消息并在页面上显示。

// Parent.js

import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: '',
    };

    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    this.setState({
      message: 'Hello from Parent!',
    });
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <button onClick={this.handleButtonClick}>Click me</button>
        <Child message={this.state.message} />
      </div>
    );
  }
}

export default Parent;

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>{this.props.message}</p>
      </div>
    );
  }
}

export default Child;

在上述代码中，我们创建了一个 Parent 组件和一个 Child 组件，并将 Child 组件作为 Parent 组件的子组件进行渲染。

Parent 组件有一个按钮，并且通过 state 管理一个 message 状态。当按钮被点击时，Parent 组件会更新 message 状态，然后将 message 作为 props 属性传递给 Child 组件。Child 组件接收 message 属性并将其显示在页面上。

通过 state 实现父子组件通信

在某些情况下，组件之间的通信需要更为复杂的逻辑。在这种情况下，可以使用组件的状态来实现通信。子组件可以通过 props 属性接收来自父组件的数据，并将其存储在自己的状态中。然后，子组件可以通过 setState 方法更新自己的状态，并触发重新渲染。

在下面的示例中，我们将展示如何通过状态实现父子组件之间的通信。

我们创建一个父组件 Parent 和一个子组件 Child。父组件有一个按钮，点击按钮将触发一个事件，事件将更新父组件的状态并将其作为 props 属性传递给子组件。子组件将使用接收到的 props 属性来更新自己的状态，并在页面上显示。

// Parent.js

import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: '',
    };

    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    this.setState({
      message: 'Hello from Parent!',
    });
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <button onClick={this.handleButtonClick}>Click me</button>
        <Child message={this.state.message} />
      </div>
    );
  }
}

export default Parent;

// Child.js

import React from 'react';

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: '',
    };

    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    this.setState({
      message: 'Hello from Child!',
    });
  }

  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>{this.props.message}</p>
        <button onClick={this.handleButtonClick}>Click me</button>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

export default Child;

在上述代码中，我们创建了一个 Parent 组件和一个 Child 组件，并将 Child 组件作为 Parent 组件的子组件进行渲染。

Parent 组件有一个按钮，并且通过 state 管理一个 message 状态。当按钮被点击时，Parent 组件会更新 message 状态，然后将 message 作为 props 属性传递给 Child 组件。Child 组件接收 message 属性并将其显示在页面上。

同时，Child 组件也有一个按钮，当按钮被点击时，Child 组件会更新自己的状态并将其显示在页面上。

通过回调函数实现父子组件通信

有时候，我们需要将子组件中的数据传递回父组件，以便父组件可以执行一些操作或更新自己的状态。在这种情况下，可以通过将回调函数作为 props 属性传递给子组件来实现通信。子组件可以调用该回调函数，并将需要传递的数据作为参数传递给它。

在下面的示例中，我们将展示如何通过回调函数实现父子组件之间的通信。

我们创建一个父组件 Parent 和一个子组件 Child。子组件有一个输入框，当输入框中的值发生变化时，子组件将调用传递给它的回调函数，并将输入框中的值作为参数传递给它。父组件将接收到传递的值，并将其存储在自己的状态中。

// Parent.js

import React from 'react';
import Child from './Child';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(value) {
        this.setState({
            inputValue: value,
        });
    }

    render() {
        return (
            <div>
                <h1>Parent Component</h1>
                <Child onInputChange={this.handleInputChange} />
                <p>Input value: {this.state.inputValue}</p>
            </div>
        );
    }
}

export default Parent;


```jsx
// Child.js

import React from 'react';

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const value = event.target.value;
    this.props.onInputChange(value);
  }

  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <input type="text" onChange={this.handleInputChange} />
      </div>
    );
  }
}

export default Child;

在上述代码中，我们创建了一个父组件 Parent 和一个子组件 Child，并将 Child 组件作为 Parent 组件的子组件进行渲染。

Child 组件有一个输入框，并且通过 props 属性将一个回调函数 onInputChange 传递给 Parent 组件。当输入框中的值发生变化时，Child 组件将调用 onInputChange 回调函数，并将输入框中的值作为参数传递给它。Parent 组件接收到传递的值，并将其存储在自己的状态中。同时，Parent 组件将输入框中的值显示在页面上。

使用 React Context 实现组件通信

在某些情况下，如果您需要将数据传递给多个组件，或者您的组件层级很深，那么通过 props 属性将数据从一个组件传递到另一个组件可能会变得很繁琐。在这种情况下，可以使用 React Context 来共享数据并在组件之间进行通信。

React Context 是 React 16.3 版本中引入的一项新功能，它允许您在组件树中传递数据，而无需显式地通过 props 属性将数据传递下去。

使用 React Context，您可以创建一个“上下文”对象，其中包含需要共享的数据，然后将其传递给 React 组件树中的所有组件。这样，任何组件都可以访问该数据，而不需要通过 props 属性进行传递。

下面的示例演示了如何使用 React Context 实现组件通信。

我们创建了一个 ThemeContext 上下文对象，其中包含一个名为 theme 的属性。然后，我们创建了两个组件 Toolbar 和 Button。Toolbar 组件将从 ThemeContext 上下文中获取 theme 属性，并将其作为 props 属性传递给 Button 组件。Button 组件将使用接收到的 theme 属性来渲染自己的样式。

// ThemeContext.js

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

// Toolbar.js

import React from 'react';
import Button from './Button';
import ThemeContext from './ThemeContext';

class Toolbar extends React.Component {
  render() {
    return (
      <div>
        <h1>Toolbar Component</h1>
        <Button />
      </div>
    );
  }
}

Toolbar.contextType = ThemeContext;

export default Toolbar;

// Button.js

import React from 'react';
import ThemeContext from './ThemeContext';

class Button extends React.Component {
  render() {
    const theme = this.context;

    return (
      <button style={{ background: theme === 'dark' ? '#000' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>
        {theme === 'dark' ? 'Dark' : 'Light'} Button
      </button>
    );
  }
}

Button.contextType = ThemeContext;

export default Button;

在上述代码中，我们创建了一个名为 ThemeContext 的上下文对象，并将其导出为默认模块。我们还创建了两个组件 Toolbar 和 Button。Toolbar 组件是一个简单的组件，它包含一个标题和一个 Button 组件。

在 Toolbar 组件中，我们将 ThemeContext 上下文对象分配给了 contextType 类型的 static 类属性。这告诉 React，我们希望 Toolbar 组件可以访问 ThemeContext 上下文对象。然后，我们在 Toolbar 组件的 render 方法中，通过 this.context 属性访问 ThemeContext 上下文中的 theme 属性，并将其作为 props 属性传递给 Button 组件。

在 Button 组件中，我们也将 ThemeContext 上下文对象分配给了 contextType 类型的 static 类属性。然后，在 render 方法中，我们使用 this.context 属性访问 ThemeContext 上下文对象，并根据 theme 属性渲染不同的样式。

最后，我们可以在 App 组件中使用 ThemeContext.Provider 组件提供 theme 属性。任何在 ThemeContext.Provider 组件之下的组件都可以通过 contextType 类型的 static 类属性访问 ThemeContext 上下文对象，从而共享 theme 属性。

// App.js

import React from 'react';
import ThemeContext from './ThemeContext';
import Toolbar from './Toolbar';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      theme: 'light',
    };

    this.toggleTheme = this.toggleTheme.bind(this);
  }

  toggleTheme() {
    this.setState((state) => ({
      theme: state.theme === 'light' ? 'dark' : 'light',
    }));
  }

  render() {
    return (
      <div>
        <h1>App Component</h1>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar />
        </ThemeContext
      </div>
    );
  }
}
export default App;

在上述代码中，我们在 App 组件中创建了一个名为 theme 的状态，其默认值为 light。我们还创建了一个 toggleTheme 方法，该方法在点击按钮时切换 theme 状态的值。

在 render 方法中，我们使用 ThemeContext.Provider 组件提供了 theme 属性。该组件将 Toolbar 组件包装在其内部，从而使 Toolbar 组件和 Button 组件都可以访问 ThemeContext 上下文对象，并使用 theme 属性渲染不同的样式。

最后，我们将 App 组件导出为默认模块，以便在其他文件中使用它。

这是一个简单的示例，演示了如何在 React 中使用上下文实现组件通信。当需要在组件树中的多个组件之间共享数据时，使用上下文是一种非常有用的技术。

总结

在React中，父子组件最常用的4种通信方式：

  • 通过 props 实现父子组件通信
  • 通过 state 实现父子组件通信
  • 通过回调函数实现父子组件通信
  • 使用 React Context 实现组件通信

在项目实战过程中，可根据实际情况选择最合适的通信方式。

写在最后

✨原创不易，希望各位大佬多多支持。
👍点赞，你的认可是我创作的动力。
⭐️收藏，感谢你对本文的喜欢。
✏️评论，你的反馈是我进步的财富。
全栈弄潮儿²⁰²⁴
关注
专栏目录
react视频教程，从入门到精通
09-05
react教程从入门到精通，初学及需要react高级的朋友都可以下载观看
8种React组件间通信方式（类组件+函数组件）
Lin_DOUbleP的博客
08-23 3654
本次分享就到这了~笔者为初学者，欢迎各位评论区交流。
10种React组件之间通信的方法
jialiang808的博客
06-16 2939
10种React组件之间通信的方法。父子组件之间的通信、兄弟组件之间的通信以及无关联的组件之间的通信。
React学习笔记（三）——React 组件通讯
最新发布
weixin_56370772的博客
09-20 1047
② 通过 prop-types 可以在创建组件的时候进行类型检查，更合理的使用组件避免错误。① 理解props都是外来的，在使用的时候如果数据类型不对，很容易造成组件内部逻辑出错。② 给子组件标签添加属性，值为 state 中的数据。③ 子组件中通过 props 接收父组件中传递的数据。② props 中 children 属性的使用。校验接收的props的数据类型，增加组件的稳健性。通过 props 将父组件的数据传递给子组件。通过 props 将子组件的数据传递给父组件。
React 组件通讯
m0_62118859的博客
04-26 2041
目录 1. 组件通讯-概念 1.组件的特点 2.知道组件通讯意义 总结： 2. 组件通讯-props 基本使用 1.传递数据和接收数据的过程 2.函数组件使用 props 3.类组件使用 props 总结： 3. 组件通讯-props 注意事项 1.知道什么是单向数据流？ 2.props 可以传递什么数据？任意 总结： 4. 组件通讯-父传子方式 1.父组件提供要传递的 state 数据 2.给子组件标签添加属性，值为 state 中的数据 3.子组件中通过 p...
react——组件通信
m0_55173487的博客
02-02 1168
组件通信分为父子组件之间的通信和非父子之间的通信 ，在父子组件通信中用到的是父传子（传递数据），字传父（传递方法），类组件多了个this，函数组件则不需要this。非父子组件通信，跨域的比较大，组件层级嵌套比较多，因此相对来说会比较复杂，但是也有方式来实现：状态提升（中间人模式，前提是必须是亲兄弟，关系复杂后不适用），发布订阅者模式（实际开发中用redux），context状态树传参（官方方法）
react组件通信
qq_43806488的博客
04-29 367
react组件通信 为什么要组件通信 组件是独立且封闭的单元，默认情况下组件只能使用自己的数据（state） 组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据 为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信 组件通信的形式 父子关系 - 最重要的 兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信 其它关系 - redux / 基于hook的方案 父传子 父组件提供要传递的数据 - stat
React 父子组件通信的实现方法
10-15
这种通信方式确保了数据流的单向性，即数据总是从父组件流向子组件，然后通过回调函数将信息反馈回父组件。这种设计有助于保持组件的独立性和可重用性，是React组件化开发的核心之一。在实际应用中，除了直接的props...
react教学笔记，从入门到精通
06-06
这份"react教学笔记，从入门到精通"涵盖了React的核心概念、基本用法以及进阶技巧，是学习React的理想资源。以下是笔记中可能包含的重要知识点： 1. **React基础知识**：React的基本理念是组件化开发，通过创建可...
react-react面试题之组件之间的通信方式.zip
03-20
在React开发中，组件间的通信是核心概念之一，它涉及到数据流动、状态管理以及应用程序的组织结构。本篇文章将深入探讨React中组件间通信的多种方法，帮助你更好地准备React面试。 1. **props（属性）**：这是最...
关于react中组件通信的几种方式详解
08-28
React 组件通信方式详解 React 中组件通信是指在 React 应用程序中，不同的组件之间如何交换数据和协作的过程。 React 官方推荐使用单向数据流的方式来实现组件通信，即父组件向子组件传递数据，而子组件不能直接...
react中组件通信
A_fork的博客
03-31 1390
今天我们来说一下react中的组件通信流程。 react中组件通信流程分为父传子、子传父、非父子之间传值。
【React】详解组件通信：从基础到进阶的全面指南
lph159的博客
07-27 552
Son// props：对象里面包含了父组件传递过来的所有的数据// { name: '父组件中的数据', age: 18, ... }Son是一个函数组件，它接收一个参数props。props是一个对象，包含了父组件传递给子组件的所有数据。在函数体内，通过可以看到props的内容，其中包括多个属性。return语句返回了一段 JSX，表示子组件的 UI 结构。是静态文本。是从props中提取的name属性，显示传递过来的名字。是从props中提取的child。
React组件间通信（常用方式，简单易用）
高大志leo的博客
10-27 4653
React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，结合实例，通俗易懂，建议收藏。 一、父子组件通信 原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。 首先，先创建一个父组件Parent.js跟子组件Children.js，二者的关系为直接父子关系。 Parent.js父组件如下，给父组件一个默认状态state，引入子组件，通过在子组件加上toChildren={this.state.msg}，该处即为向子组件传..
React组件之间的8种通讯方式
m0_68271787的博客
01-05 666
在上述代码中，点击子组件中的 div 元素之后，在浏览器的控制台可以看到输出了这个 div 元素。如果两个需要通讯的组件，它们拥有共同的父级组件，我们可以使用上述的策略组合，只是需要使用父级组件作为沟通的媒介，把数据作为父组件的 state 和方法来定义。Flux是必须的吗？在父组件中可以用 refs 引用子组件，之后就可以调用子组件的实例方法了。最简单的方式是在父组件中传递一个函数给子组件，子组件可以使用这个函数来把数据传给它的父组件。当你想在父组件中捕获来自子组件中的 DOM 事件时，可以采用此方法。
【React】React组件通信（详解）
aDiaoYa_的博客
07-15 4267
目前我们所学习到的Vue、React都是组件化开发，在这些项目中，一个页面会被拆分成很多组件，组件之间层层嵌套形成所谓的“祖组件”、“父组件”和“子组件”，而这些组件之间往往需要数据信息传递，即组件通信。下文内容，是我在学习react的过程中总结的几种通信方法： 1、props父子组件通信 2、Context跨组件通信 3、消息订阅与发布 4、redux与react-redux集中式管理
React组件之间如何通信？
Aan___的博客
08-18 193
通过创建一个 Context 对象，并使用 Provider 组件在上层组件中提供数据，子组件可以使用 Consumer 组件或 useContext 钩子访问上下文中的数据。Props传递：通过将数据或回调函数以属性(props)的形式传递给子组件，实现父组件向子组件通信的方式。子组件可以通过 props 访问父组件传递的数据或触发父组件提供的回调函数。父子组件实例引用：父组件可以通过Ref来获取子组件的引用，从而直接调用子组件的方法或访问子组件的属性。这种方式常用于访问子组件的公共方法或数据。
React父子组件间传值详解及示例
在React应用程序中，父子组件间的通信是构建复杂用户界面的关键部分。本文将详细介绍React父子组件之间的几种主要传值方法，包括props和state的交互，以及高级用法如Context API和Redux。首先，我们来看一下最基本的...
评论 32
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈弄潮儿²⁰²⁴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值