备案控制台
探索云世界
开发者社区 云原生 文章 正文

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

2023-09-25 247
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
函数计算 FC，180元额度 3个月
推荐场景：
活动用函数FC部署Stable Diffusion 部署通义千问预体验 图生图，部署3D卡通风格模型
服务治理 MSE Sentinel/OpenSergo，Agent数量 不受限
可观测可视化 Grafana 版，10个用户账号 1个月
简介： 在React中，父子组件最常用的4种通信方式：- 通过 props 实现父子组件通信- 通过 state 实现父子组件通信- 通过回调函数实现父子组件通信- 使用 React Context 实现组件通信在项目实战过程中，可根据实际情况选择最合适的通信方式。

前言

image.png

在上一篇文章《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 Native入门
React Native示例
react.js组件通信
react.js通信
react.js组件
全栈弄潮儿
目录
相关文章
天玄TX
|
28天前
|
前端开发 JavaScript 开发者
React：JSX语法入门
React：JSX语法入门
天玄TX
24 0
恬0917
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库，嵌套路由
React 的antd-mobile 组件库，嵌套路由
恬0917
42 0
无妄的罪
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
无妄的罪
17 1
快乐阿超
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
快乐阿超
21 0
雪碧有白泡泡
|
2月前
|
前端开发 JavaScript
快速上手React：从概述到组件与事件处理
快速上手React：从概述到组件与事件处理
雪碧有白泡泡
56 0
恬0917
|
3月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
恬0917
74 1
恬0917
|
3月前
|
资源调度 前端开发 JavaScript
React组件
React组件
恬0917
42 0
天下无贼001
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native，通过比较原生应用与React Native的优缺点，探讨其在实际项目中的应用以及未来发展趋势。
天下无贼001
33 2
叫个什么名字
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架，使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始，介绍React Native的基础知识和开发流程，帮助读者快速入门React Native开发，并实现一个简单的ToDo应用程序。
叫个什么名字
37 2
阿珊和她的猫
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察：深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察：深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
阿珊和她的猫
556 0

云原生

热门文章

最新文章

  • 1
    Docker 镜像加速器
  • 2
    Docker CE 镜像源站
  • 3
    RocketMQ 事件驱动：云时代的事件驱动有啥不同？
  • 4
    Minikube - Kubernetes本地实验环境
  • 5
    Apache RocketMQ ACL 2.0 全新升级
  • 6
    OpenKruise v1.6 版本解读：增强多域管理能力
  • 7
    微服务架构的理论基础 - 康威定律
  • 8
    微服务（Microservice）那点事
  • 9
    Docker的Windows容器初体验
  • 10
    3分钟，了解阿里云热门开发者工具 Cloud Toolkit
  • 1
    学会使用 NumPy：基础、随机、ufunc 和练习测试
    4
  • 2
    etcd 的简介以及发展历史
    4
  • 3
    docker 部署单节点的etcd以及 常用使用命令
    5
  • 4
    30 秒出服装设计稿，森马用函数计算+AIGC 整“新活”!
    11
  • 5
    Spring AI 抢先体验，5 分钟玩转 Java AI 应用开发
    15
  • 6
    【云故事探索】案例征集 · 4月获奖名单
    7
  • 7
    一分钟部署 Llama3 中文大模型，没别的，就是快
    14
  • 8
    无需重新学习，使用 Kibana 查询/可视化 SLS 数据
    33
  • 9
    使用SSH隧道将Ubuntu云服务器Jupyter Notebook端口映射到本地
    12
  • 10
    【Spring系列笔记】AOP
    12

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考