返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React通过conetxt实现多组件传值功能
  • 318
分享到

React通过conetxt实现多组件传值功能

2024-04-02 19:04:59 318人浏览 独家记忆
摘要

该功能实现效果类似于Vue的provide/inject 而React可通过context进行完成 定义一个公共的文件context/Theme.jsx import { cr

该功能实现效果类似于Vue的provide/inject
React可通过context进行完成

在这里插入图片描述

定义一个公共的文件context/Theme.jsx


import { createContext } from 'react';
const theme = createContext()
export default theme

父组件引入公共文件及子组件
并传递theme值


import React, { useState } from 'react';
import Child from "@/components/Child.jsx"
import Theme from "@/context/Theme.jsx"
export default () => {
    const [theme, setTheme] = useState("blue")
    return (
        <>
            <button onClick={() => setTheme("green")}>检验context是否为响应式</button>
            <Theme.Provider value={theme}>
                <Child />
            </Theme.Provider>
        </>
    )
}

子组件获取数据components/Child.jsx


import React from 'react';
import Theme from "@/context/Theme.jsx"
export default () => {
    return (
        <Theme.Consumer>
            {data => <p>接收父组件context传递的值:{data}</p>}
        </Theme.Consumer>
    );
}

到此这篇关于React通过conetxt实现多组件传值的文章就介绍到这了,更多相关React多组件传值内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: React通过conetxt实现多组件传值功能

本文链接: https://lsjlt.com/news/155076.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • React通过conetxt实现多组件传值功能
    该功能实现效果类似于vue的provide/inject 而React可通过context进行完成 定义一个公共的文件context/Theme.jsx import { cr...
    99+
    2024-04-02
  • React父子组件传值(组件通信)的实现方法
    目录1、父组件传值子组件2、子组件传值父组件3、兄弟组件传值1、父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个para...
    99+
    2024-04-02
  • Vue和React组件怎么实现传值
    本篇文章为大家展示了Vue和React组件怎么实现传值,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。组件间的传值方式组件的传值场景无外乎以下几种:父子之间兄弟之间多...
    99+
    2024-04-02
  • React组件间传值及跨组件通信详解
    目录组件间传值propsref状态提升跨组件通信组件间传值 props 父传子:通过自定义属性向子组件传值,值可以是任何类型 子传父:通过父组件把方法传给子组件,子组件调用传过去的方...
    99+
    2024-04-02
  • 通过Java实现文件断点续传功能
    目录什么是断点续传解决方案效果演示参考代码前端后端什么是断点续传 用户上传大文件,网络差点的需要历时数小时,万一线路中断,不具备断点续传的服务器就只能从头重传,而断点续传就是,允许用...
    99+
    2024-04-02
  • Vue和React组件间如何实现传值
    这篇文章主要讲解了“Vue和React组件间如何实现传值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue和React组件间如何实现传值”吧!组件间的传值方式组件的传值场景无外乎以下几种:...
    99+
    2023-07-04
  • react-router-dom v6 通过outlet实现keepAlive 功能的实现
    本文主要介绍了react-router-dom v6 通过outlet实现keepAlive 功能的实现,具体如下: keepAlive代码: import React, { us...
    99+
    2024-04-02
  • 怎么通过Java实现文件断点续传功能
    这篇文章主要介绍“怎么通过Java实现文件断点续传功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么通过Java实现文件断点续传功能”文章能帮助大家解决问题。什么是断点续传用户上传大文件,网络差...
    99+
    2023-06-30
  • 通过实例讲解vue组件之间的传值
    目录前言1.父组件向子组件进行传值2.子组件向父组件进行传值3.非父子组件之间的传值 总结前言 目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和...
    99+
    2024-04-02
  • react-beautiful-dnd 实现组件拖拽功能
    目录1.安装2.APi3.react-beautiful-dnd demo3.1 demo1 纵向组件拖拽3.2 demo2 水平拖拽3.3 demo3实现一个代办事项的拖拽(纵向 ...
    99+
    2024-04-02
  • Java实现多文件上传功能
    文件上传是开发中十分常见的功能,在servlet3.0之前,实现文件上传需要使用一些插件技术,比如: commons-fileupload smartupload ...
    99+
    2024-04-02
  • Struts2实现多文件上传功能
    前台form 表单:设置method=post,enctype=multipart/form-data。struts2在原有的上传解析器继承上做了进一步封装,更进一步简化了文件上传。Action需要使用3个属性来封装该文件域的信息:(1)类...
    99+
    2023-05-31
    struts2 上传 st
  • Angular5.0 子组件如何通过service传递值给父组件
    这篇文章主要为大家展示了“Angular5.0 子组件如何通过service传递值给父组件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular5.0 子...
    99+
    2024-04-02
  • 如何通过vue封装tree组件实现搜索功能
    本篇文章和大家了解一下如何通过vue封装tree组件实现搜索功能。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。我使用的是 vue2 + antd, 那么 antd 的 tree 组件中没有给我们封装搜索,其官网提供的搜索...
    99+
    2023-07-06
  • React组件通信如何实现
    这篇文章主要介绍“React组件通信如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“React组件通信如何实现”文章能帮助大家解决问题。1. 父子组件通信方式父子组件之间的通信很常见,其中父组...
    99+
    2023-07-05
  • 基于React-Dropzone开发上传组件功能(实例演示)
    这次我要讲述的是在React-Flask框架上开发上传组件的技巧。我目前主要以React开发前端,在这个过程中认识到了许多有趣的前端UI框架——React-Bootstrap、Ant...
    99+
    2024-04-02
  • vue2.0中怎么实现组件间传值与通信
    这篇文章将为大家详细讲解有关vue2.0中怎么实现组件间传值与通信,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、通过路由带参数进行传值①两个组件 A和B...
    99+
    2024-04-02
  • react使用antd的上传组件实现文件表单一起提交功能
    本篇内容主要讲解“react使用antd的上传组件实现文件表单一起提交功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react使用antd的上传组件实现文件表单一起提交功能”吧!项目中需要实...
    99+
    2023-06-20
  • 使用fileupload组件实现文件上传功能
    使用fileupload组件实现文件上传功能可以按照以下步骤进行:1. 导入相关文件和库:首先,需要导入jQuery库和fileup...
    99+
    2023-08-14
    fileupload
  • React 组件间怎么实现通信
    本篇文章给大家分享的是有关React 组件间怎么实现通信,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。父子组件通讯通讯手段这是最常见的通信方式...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作