首页 > 其他分享 >React组件通信

React组件通信

时间:2024-10-14 20:18:24浏览次数:8  
标签:function 传递 return 通信 React msg props 组件

React组件通信

一、父传子

方式1:

​ 通过在子组件标签上设置属性值传递,子组件函数通过props参数接收

如:

//  定义子组件
function Son(props) {
    // 通过标签属性传递,属性以及对应的值都会通过props参数接收
    return <div>父组件传递的属性值:name={props.name}</div>
}
export default function App() {
    return (
        <div className="App">
            <Son name='zs'></Son>
        </div>
    );
}

props参数接收的是一个对象,该对象接收了父组件传来的各种属性值

方式2:

​ 在子组件闭合标签中传递chidren对象,通过子组件函数的props参数接收props.chidren进行访问

如:

//  定义子组件
function Son(props) {
    return <div>{props.children}</div>
}
export default function App() {
    return (
        <div className="App">
            <Son> 
        		<div>children传递</div> 
        	</Son>
        </div>
    );
}

这里需要注意的是,如果在子组件闭合标签中只传递1个标签,那么chidren就是这个标签对象;如果传递了多个标签,chidren将是一个数组

二、子传父

父组件将通信函数通过标签属性传递给子组件,子组件通过向通信函数传递参数来进行数据通信

如:

import {useState} from "react";

function Son(props) {
    //  执行父组件传来的通信函数,通过通信函数参数传递传递通信数据
    return <div>
        <button onClick={() => props.onTime(Date.now())}>问问儿子时间</button>
    </div>
}
export default function App() {
    const [curTime, setCurTime] = useState()
    //  定义通信函数
    function getCurTime(cTime) {
        //  从子组件获取到cTime进行自定义操作
        setCurTime(cTime)
    }
    return (
        <div className="App">
            {/* 通过标签属性将函数传递给子组件 */}
            <Son onTime={getCurTime}/>
            {/* 展示儿子传来的时间 */}
            <div>{curTime}</div>
        </div>
    );
}

三、兄弟通信

儿子A和儿子B通信,即A -> 父亲 -> B

如:

function SonA(props) {
    const [msg, setMsg] = useState('A: 我饿了!' + Date.now())
    return  (
        <button onClick={() => {
            setMsg('A: 我饿了!' + Date.now())
            props.acceptMsgFromSonA(msg)
        }}>
            儿子A饿了
        </button>
    )
}

function SonB(props) {
    return <div>
        <div>儿子B</div>
        <div>接收到父亲传来的消息:{props.acceptMsgFromFather()}</div>
    </div>
}

export default function App() {
    const [msg, setMsg] = useState()
    //	用msg接收儿子A传来的数据
    function acceptMsgFromSonA(message) {
        setMsg(message)
    }
    //	获取msg
    function getMsg() {
        return msg
    }
    return (
        <div>
            <SonA acceptMsgFromSonA={acceptMsgFromSonA}></SonA>
            <SonB acceptMsgFromFather={getMsg}></SonB>
        </div>
    )
}

四、顶层向底层传递

即父向子、父向孙、…等传递数据

① 利用createContext()创建上下文Context对象

② 在顶层组件需要传递数据的地方用Context.Provider标签包裹,通过value属性指定需要传递的数据

③ 在底层组件通过useContext(Context)拿到顶层传递的数据

具体使用如下:


//	1.创建上下文对象
const MsgContext = createContext()

export default function App() {
    const [msg, setMsg] = useState('父组件Msg')
    const [modifyCount, setModifyCount] = useState(0)
    return (
        <div>
        	{/*	2.通过Context.Provider的value属性指定向下传递的数据	*/}
            <MsgContext.Provider value={msg}>
                <div>父组件:</div>
                <Son></Son>

            </MsgContext.Provider>
            <button onClick={() => {
                setMsg(`修改父组件Msg ${modifyCount + 1}次`)
                setModifyCount(modifyCount + 1)
            }}>
                修改父组件Msg
            </button>
        </div>
    )
}
function Son(props) {
    return (
        <div>
            <div>儿子组件:</div>
            <GrandSon></GrandSon>
        </div>
    )
}

function GrandSon(props) {
    //	3.使用useContext(Context)获取顶层传递的数据
    const msg = useContext(MsgContext)
    return (
        <div>
            <div>孙子组件:{msg}</div>
        </div>
    )
}

标签:function,传递,return,通信,React,msg,props,组件
From: https://blog.csdn.net/weixin_74261199/article/details/142927657

相关文章

  • adminPage-vue3依赖 v1.2.0新增组件 DetailsModule说明文档
    adminPage-vue3依赖v1.2.0新增组件DetailsModule说明文档引入思路介绍DetailsModuleAPI汇总属性插槽自定义对象config(array<object\>/object类型)config.list(array<object\>类型)使用基础使用范例config-titleconfig-moduleKeyconfig-listconfig-list-slotNamec......
  • vue之间的传值问题---7ref实现组件之间传值
    1.父组件向子组件传值:父组件可以通过ref属性获取子组件的实例,进而访问子组件的方法和数据。父组件<template><div><child-componentref="child"></child-component><button@click="sendToChild">SendtoChild</button></div><......
  • vue之间的传值问题---6eventbus 可以实现兄弟组件通信
    1.传递数据的组件:通过eventbus中的方法$emit来发布自定义事件,并且传递数据2.接收数据的组件:通过eventbus中的方法$on来订阅事件,并通过回调函数接收数据//手写发布订阅模式classEventBus{//记录事件和回调clientList={send:[()=>{},()=>{}],}//......
  • 时序图分析(IIC通信为例)
    一、时序图分析(IIC通信为例)  时序图-->编程解析:时序概念:一般指可编程器件的编程方法,在单片机编程时,需要根据被控芯片的时序去写程序,把芯片上的时序用代码来实现,方可实现单片机和芯片之间的通信(一般不需要自己绘制时序图,查询相关数据手册即可)。(一)IIC开始/结束时序分析判......
  • Spring Cloud 常用组件详解
    概述SpringCloud是一套微服务架构的开发工具,它为开发者提供了在分布式系统(尤其是微服务架构)中常见的那些模式的实现,例如服务发现、配置管理、断路器、智能路由、微代理、控制总线、一次性令牌、全局锁、决策竞选、分布式会话等等。这些模式都是围绕着微服务架构这一核心理念......
  • react父级组件和子组件方法互相调用
    1、父组件调用子组件:(1)方法一:自定义属性+useImpretiveHandle父组件://React是模块引入,useRef和useEffect是具体引入importReact,{useRef,useEffect}from'react';importChildComponentfrom'./ChildComponent';functionParentComponent(){constchildRef=useRef......
  • 现代化 React UI 库:Material-UI 详解!
    随着React在前端开发中的流行,越来越多的UI框架和库开始涌现,以帮助开发者更高效地构建现代化、响应式的用户界面。其中,Material-UI是基于GoogleMaterialDesign规范设计的一款开源ReactUI库,GithubStar高达94K,凭借其丰富的组件库、灵活的定制化选项以及无缝的开发体验,......
  • MES系统工单管理模块:提升生产效率与质量的关键组件
    MES系统中的工单管理模块是MES系统的关键组成部分,它主要负责生产任务的具体分配、执行情况的监控以及生产流程的优化。以下是对工单管理模块的详细介绍: 一、工单管理的主要功能生产任务分配:工单管理模块根据生产计划,将具体的生产任务分配给特定的工作站或设备。支持任务......
  • 通信工程学习:什么是SDRAM同步动态随机存取存储器
    SDRAM:同步动态随机存取存储器    SDRAM,全称为SynchronousDynamicRandomAccessMemory,即同步动态随机存取存储器,是一种广泛应用于计算机和嵌入式系统中的内存技术。以下是对SDRAM的详细介绍:一、SDRAM的定义与特点        SDRAM的定义:   SDRAM是一......
  • 通信工程学习:什么是SPI串行外设接口
    SPI:串行外设接口    SPI,即串行外设接口(SerialPeripheralInterface),是一种由Motorola公司首先在其MC68HCXX系列处理器上定义的同步串行接口技术。SPI接口主要用于微控制器(MCU)与外部设备之间的通信,如存储器、传感器、显示屏等。以下是关于SPI接口的详细介绍:一、SPI......