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

React通过useContext特性实现组件数据传递

 更新时间：2023年06月28日 10:44:38   作者：-耿瑞-  
本文主要介绍了React如何通过useContext特性实现组件数据传递，文中有相关的代码示例供大家参考，对我们学习React有一定的帮助,需要的朋友可以参考下

我们来说一个属性 useContext
这个确实用的挺少的 不过 还是简单做一下
打开我们的react项目 在src下创建一个文件夹 components 因为他是两个 甚至多个组件之间使用的
然后在components下创建两个组件 分别叫 dom.jsx dom1.jsx 命名命的比较不规范 不过本身只是做个案例 懒得做那么规范了

dom.jsx 我们作为父组件 编写代码如下

import React from "react";
import Daom1 from "./dom1";
export const MyComponent = React.createContext();
const dom = () => {
  return (
    <div>
      <MyComponent.Provider value="hello dom1">
        <Daom1 />
      </MyComponent.Provider>
    </div>
  );
};
export default React.memo(dom);

这里 我们通过MyComponent.Provider中vulue 定义了个数据 值是字符串类型的 hello dom1
然后调用了 我们的 dom1 组件 作为自己的子组件

然后 我们dom1 代码编写如下

import React, { useContext } from "react";
import { MyComponent } from "./dom";
const Dom1 = () => {
  const contextValue = useContext(MyComponent);
  return (
    <div>
      <h1>{contextValue}</h1>
    </div>
  );
};
export default React.memo(Dom1);

获取 同目录dom1组件中导出的 MyComponent 对象 通过useContext输出其中的值

然后 在App根组件中调用dom.jsx组件

项目运行结果如下

可以看到 dom MyComponent.Provider value 中定义的值 然后在 dom1中获取 在h1中显示 整个过程非常完美 不过这个数据共享方案老实说 挺捞的 用的会少一些 因为限制很多 也不知道实用

到此这篇关于React通过useContext特性实现组件数据传递的文章就介绍到这了,更多相关React useContext数据传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React18 useState何时执行更新及微任务理解

    React18 useState何时执行更新及微任务理解

    这篇文章主要为大家介绍了React18 useState何时执行更新及微任务理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • React中使用Workbox进行预缓存的实现代码

    React中使用Workbox进行预缓存的实现代码

    Workbox是Google Chrome团队推出的一套 PWA 的解决方案,这套解决方案当中包含了核心库和构建工具,因此我们可以利用Workbox实现Service Worker的快速开发,本文小编给大家介绍了React中使用Workbox进行预缓存的实现,需要的朋友可以参考下
    2023-11-11
  • 利用React-router+Webpack快速构建react程序

    利用React-router+Webpack快速构建react程序

    目前 React、Webpack 等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识怎么学习一下，开启一段新的前端开发之路呢？那么这篇将给大家运用示例代码详细的介绍使用React-router和Webpack如何快速构建一个react程序，感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • react组件实例属性state详解

    react组件实例属性state详解

    这篇文章主要介绍了react组件实例属性state,有状态state的组件称作复杂组件,没有状态的组件称为简单组件，状态里存储数据,数据的改变驱动页面的展示，本文结合实例代码给大家详细讲解，需要的朋友可以参考下
    2023-02-02
  • react实现keep-alive功能

    react实现keep-alive功能

    React无内置keep-alive,可通过父组件状态缓存、React Router自定义缓存、第三方库（如react-keep-alive）实现,接下来通过本文给大家详细介绍react实现keep-alive功能的详细过程,感兴趣的朋友一起看看吧
    2025-08-08
  • React Flux与Redux设计及使用原理

    React Flux与Redux设计及使用原理

    这篇文章主要介绍了React Flux与Redux设计及使用，Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（state对象）保存这一整个应用的状态，这个对象不能直接被改变
    2023-03-03
  • 详解React自定义Hook

    详解React自定义Hook

    在React项目中,我们经常会使用到React自带的几个内置Hooks，如 useState，useContext和useEffect。虽然在React中找不到这些 Hooks，但React提供了非常灵活的方式让你为自己的需求来创建自己的自定义Hooks，想了解更多的，欢迎阅读本文
    2023-04-04
  • 浅谈React双向数据绑定原理

    浅谈React双向数据绑定原理

    在 React中是不存在双向数据绑定的机制的，需要我们自己对其进行实现。本文主要介绍一下React双向数据绑定，感兴趣的可以了解一下
    2021-11-11
  • 基于PixiJS实现react图标旋转动效

    基于PixiJS实现react图标旋转动效

    PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能，这篇文章主要介绍了用PixiJS实现react图标旋转动效,需要的朋友可以参考下
    2022-05-05
  • 详解React Native 屏幕适配（炒鸡简单的方法）

    详解React Native 屏幕适配（炒鸡简单的方法）

    React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配，这篇文章主要介绍了详解React Native 屏幕适配（炒鸡简单的方法），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论