脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 组件通信

详解React 中组件通信的几种主要方式

 更新时间：2025年09月04日 09:52:54   作者：自信的飞  
本文主要介绍了详解React 中组件通信的几种主要方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、父传子：

1. 传递多个属性

父组件可以通过 props 传递多个属性给子组件。

示例

// 子组件
function Son(props) {
    return (
        <div>
            This is Son, {props.name} - Age: {props.age}
        </div>
    );    
}

// 父组件
function App() {
    const name = 'This is App Name';
    const age = 10;
    return (
        <div>
            <Son name={name} age={age} />
        </div>
    );
}

2. 传递函数作为 props

父组件可以将函数作为 props 传递给子组件，子组件可以调用这个函数来与父组件进行交互。

示例

// 子组件
function Son(props) {
    const handleClick = () => {
        props.onButtonClick('Button clicked!');
    };

    return (
        <div>
            This is Son. 
            <button onClick={handleClick}>Click Me</button>
        </div>
    );    
}

// 父组件
function App() {
    const handleSonClick = (message) => {
        console.log(message);
    };

    return (
        <div>
            <Son onButtonClick={handleSonClick} />
        </div>
    );
}

3. 使用默认值

为子组件的 props 设置默认值，使用 defaultProps。

示例

// 子组件
function Son(props) {
    return <div>This is Son, {props.name}</div>;    
}

Son.defaultProps = {
    name: 'Default Name'
};

// 父组件
function App() {
    return (
        <div>
            <Son /> {/* 不传递 name 属性 */}
        </div>
    );
}

4. PropTypes 验证

使用 prop-types 库可以对传递给子组件的 props 进行类型检查。

示例

import PropTypes from 'prop-types';

// 子组件
function Son(props) {
    return <div>This is Son, {props.name}</div>;    
}

Son.propTypes = {
    name: PropTypes.string.isRequired, // name 是必需的字符串
};

// 父组件
function App() {
    return (
        <div>
            <Son name="This is App Name" />
        </div>
    );
}

5. 传递对象和数组

父组件可以传递对象或数组作为 props，子组件可以直接使用。

示例:

子组件向父组件传递数据的主要方式是通过回调函数。父组件将一个函数作为 props 传递给子组件，子组件在需要时调用这个函数，并将数据作为参数传递给父组件。

// 子组件
function Son(props) {
    return (
        <div>
            This is Son, {props.data.name}, Age: {props.data.age}
        </div>
    );    
}

// 父组件
function App() {
    const user = { name: 'John', age: 25 };
    return (
        <div>
            <Son data={user} />
        </div>
    );
}

总结：

  • 多属性传递: 父组件可以传递多个属性给子组件。
  • 函数作为 props: 父组件可以将函数传递给子组件，子组件可以调用这个函数与父组件进行交互。
  • 默认值和类型检查: 可以通过 defaultProps 和 PropTypes 来确保 props 的完整性和正确性。
  • 传递对象和数组: 可以将复杂的数据结构（如对象和数组）作为 props 传递。

二、子传父：

子组件向父组件传递数据的主要方式是通过回调函数。父组件将一个函数作为 props 传递给子组件，子组件在需要时调用这个函数，并将数据作为参数传递给父组件。 

1.基本用法示例：

父组件

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

function App() {
    const handleMessage = (msg) => {
        console.log("Received from Son:", msg);
    };

    return (
        <div>
            <h1>Parent Component</h1>
            <Son onSendMessage={handleMessage} />
        </div>
    );
}

export default App;

子组件

import React from 'react';

function Son(props) {
    const sendMessage = () => {
        props.onSendMessage("Hello from Son!");
    };

    return (
        <div>
            <h2>Child Component</h2>
            <button onClick={sendMessage}>Send Message to Parent</button>
        </div>
    );
}

export default Son;

2. 传递事件数据

子组件可以传递事件数据给父组件，通常用于处理用户输入或按钮点击。

示例

// 父组件
function App() {
    const handleInputChange = (inputValue) => {
        console.log("Input from Son:", inputValue);
    };

    return (
        <div>
            <h1>Parent Component</h1>
            <Son onInputChange={handleInputChange} />
        </div>
    );
}

// 子组件
function Son(props) {
    const handleChange = (event) => {
        props.onInputChange(event.target.value);
    };

    return (
        <div>
            <h2>Child Component</h2>
            <input type="text" onChange={handleChange} placeholder="Type something..." />
        </div>
    );
}

3. 传递多个参数

子组件也可以通过回调函数传递多个参数给父组件。

示例

// 父组件
function App() {
    const handleData = (name, age) => {
        console.log("Received from Son:", name, age);
    };

    return (
        <div>
            <h1>Parent Component</h1>
            <Son onSendData={handleData} />
        </div>
    );
}

// 子组件
function Son(props) {
    const sendData = () => {
        props.onSendData("John", 30);
    };

    return (
        <div>
            <h2>Child Component</h2>
            <button onClick={sendData}>Send Data to Parent</button>
        </div>
    );
}

总结：

  • 回调函数: 子组件通过调用父组件传递的回调函数来传递数据。
  • 事件数据传递: 子组件可以通过回调函数向父组件传递事件数据，如用户输入。
  • 多个参数: 子组件可以通过回调函数传递多个参数给父组件。

三、使用Context机制跨层级组件通信:

App组件——A组件——B组件

1.创建上下文对象:在所有组件外部创建一个上下文对象

import React, { createContext } from 'react';

// 创建上下文对象
cosnt MsgContext = createContext()

2.顶层组件提供数据:在顶层组件通过Provider组件提供数据

// App.js
import React, { useState } from 'react';
import MyContext from './MyContext';
import ComponentA from './ComponentA';

const App = () => {
    const [data, setValue] = useState("Hello from Context!");

    return (
        <MyContext.Provider value={{ data, setData }}>
            <h1>Top Level Component</h1>
            <A />
        </MyContext.Provider>
    );
};

export default App;

3.中间组件A组件(可选)

// ComponentA.js
import React from 'react';
import ComponentB from './ComponentB';

const ComponentA = () => {
    return (
        <div>
            <h2>Component A</h2>
            <B />
        </div>
    );
};

export default ComponentA;

4.底层组件消费数据: 在底层组件中使用 useContext 钩子获取数据。

// ComponentB.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

const ComponentB = () => {
    const { value, setValue } = useContext(MyContext); // 获取上下文
    const changeValue = () => {
        setValue('update from B'); // 更新上下文值
    };

    return (
        <div>
            <h3>Component B</h3>
            <p>Data from Context: {data}</p>
            <button onClick={changeValue}>更新值</button>
        </div>
    );
};

export default ComponentB;

总结：

  • 创建 Context: 使用 createContext 创建上下文。
  • 提供 Context: 使用 Context.Provider 在顶层组件中提供数据。
  • 使用 Context: 在子组件中使用 useContext 钩子访问上下文。
  • 更新 Context: 子组件通过调用更新函数来修改上下文的值。

到此这篇关于详解React 中组件通信的几种主要方式的文章就介绍到这了,更多相关React 组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

  • React类组件和函数组件的所有核心区别及说明

    React类组件和函数组件的所有核心区别及说明

    这篇文章主要介绍了React类组件和函数组件的所有核心区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2026-03-03
  • 详解create-react-app 2.0版本如何启用装饰器语法

    详解create-react-app 2.0版本如何启用装饰器语法

    这篇文章主要介绍了详解create-react-app 2.0版本如何启用装饰器语法，cra2.0时代如何启用装饰器语法呢? 我们依旧采用的是react-app-rewired, 通过劫持webpack cofig对象, 达到修改的目的
    2018-10-10
  • React Redux使用配置详解

    React Redux使用配置详解

    react-redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下
    2022-08-08
  • react中关于函数调用()与bind this的原因及分析

    react中关于函数调用()与bind this的原因及分析

    这篇文章主要介绍了react中关于函数调用()与bind this的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • 详解React 的几种条件渲染以及选择

    详解React 的几种条件渲染以及选择

    这篇文章主要介绍了详解React 的几种条件渲染以及选择，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • React实现评论的添加和删除

    React实现评论的添加和删除

    这篇文章主要为大家详细介绍了React实现评论的添加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • React 小技巧教你如何摆脱hooks依赖烦恼

    React 小技巧教你如何摆脱hooks依赖烦恼

    Hooks 是一种函数，该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。 Hooks 在类内部不起作用 - 它们允许你无需类就使用 React，本文带领大家学习React 小技巧教你如何摆脱hooks依赖烦恼，感兴趣的朋友一起看看吧
    2021-05-05
  • 记React connect的几种写法(小结)

    记React connect的几种写法(小结)

    这篇文章主要介绍了记React connect的几种写法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 基于react框架使用的一些细节要点的思考

    基于react框架使用的一些细节要点的思考

    下面小编就为大家带来一篇基于react框架使用的一些细节要点的思考。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • React+Ts实现二次封装组件

    React+Ts实现二次封装组件

    本文主要介绍了React+Ts实现二次封装组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04

最新评论