快捷導(dǎo)航

React通過useContext特性實現(xiàn)組件數(shù)據(jù)傳遞

更新時間：2023年06月28日 10:44:38 作者：-耿瑞-

本文主要介紹了React如何通過useContext特性實現(xiàn)組件數(shù)據(jù)傳遞，文中有相關(guān)的代碼示例供大家參考，對我們學(xué)習(xí)React有一定的幫助,需要的朋友可以參考下

我們來說一個屬性 useContext
這個確實用的挺少的不過還是簡單做一下
打開我們的react項目在src下創(chuàng)建一個文件夾 components 因為他是兩個甚至多個組件之間使用的
然后在components下創(chuàng)建兩個組件分別叫 dom.jsx dom1.jsx 命名命的比較不規(guī)范不過本身只是做個案例懶得做那么規(guī)范了

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 定義了個數(shù)據(jù) 值是字符串類型的 hello dom1
然后調(diào)用了我們的 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組件中導(dǎo)出的 MyComponent 對象通過useContext輸出其中的值

然后在App根組件中調(diào)用dom.jsx組件

項目運(yùn)行結(jié)果如下

可以看到 dom MyComponent.Provider value 中定義的值然后在 dom1中獲取在h1中顯示整個過程非常完美不過這個數(shù)據(jù)共享方案老實說挺撈的用的會少一些因為限制很多也不知道實用

到此這篇關(guān)于React通過useContext特性實現(xiàn)組件數(shù)據(jù)傳遞的文章就介紹到這了,更多相關(guān)React useContext數(shù)據(jù)傳遞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React18?useState何時執(zhí)行更新及微任務(wù)理解
這篇文章主要為大家介紹了React18?useState何時執(zhí)行更新及微任務(wù)理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
React中使用Workbox進(jìn)行預(yù)緩存的實現(xiàn)代碼
Workbox是Google Chrome團(tuán)隊推出的一套 PWA 的解決方案,這套解決方案當(dāng)中包含了核心庫和構(gòu)建工具,因此我們可以利用Workbox實現(xiàn)Service Worker的快速開發(fā),本文小編給大家介紹了React中使用Workbox進(jìn)行預(yù)緩存的實現(xiàn),需要的朋友可以參考下
2023-11-11
利用React-router+Webpack快速構(gòu)建react程序
目前 React、Webpack 等技術(shù)如火如荼，你是不是還在愁苦如何把這些雜亂的知識怎么學(xué)習(xí)一下，開啟一段新的前端開發(fā)之路呢？那么這篇將給大家運(yùn)用示例代碼詳細(xì)的介紹使用React-router和Webpack如何快速構(gòu)建一個react程序，感興趣的朋友們下面來一起看看吧。
2016-10-10
react組件實例屬性state詳解
這篇文章主要介紹了react組件實例屬性state,有狀態(tài)state的組件稱作復(fù)雜組件,沒有狀態(tài)的組件稱為簡單組件，狀態(tài)里存儲數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動頁面的展示，本文結(jié)合實例代碼給大家詳細(xì)講解，需要的朋友可以參考下
2023-02-02
react實現(xiàn)keep-alive功能
React無內(nèi)置keep-alive,可通過父組件狀態(tài)緩存、React Router自定義緩存、第三方庫（如react-keep-alive）實現(xiàn),接下來通過本文給大家詳細(xì)介紹react實現(xiàn)keep-alive功能的詳細(xì)過程,感興趣的朋友一起看看吧
2025-08-08
React?Flux與Redux設(shè)計及使用原理
這篇文章主要介紹了React?Flux與Redux設(shè)計及使用，Redux最主要是用作應(yīng)用狀態(tài)的管理。簡言之，Redux用一個單獨(dú)的常量狀態(tài)樹（state對象）保存這一整個應(yīng)用的狀態(tài)，這個對象不能直接被改變
2023-03-03
詳解React自定義Hook
在React項目中,我們經(jīng)常會使用到React自帶的幾個內(nèi)置Hooks，如 useState，useContext和useEffect。雖然在React中找不到這些 Hooks，但React提供了非常靈活的方式讓你為自己的需求來創(chuàng)建自己的自定義Hooks，想了解更多的，歡迎閱讀本文
2023-04-04
淺談React雙向數(shù)據(jù)綁定原理
在 React中是不存在雙向數(shù)據(jù)綁定的機(jī)制的，需要我們自己對其進(jìn)行實現(xiàn)。本文主要介紹一下React雙向數(shù)據(jù)綁定，感興趣的可以了解一下
2021-11-11
基于PixiJS實現(xiàn)react圖標(biāo)旋轉(zhuǎn)動效
PixiJS是一個開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項目提供了極快的性能，這篇文章主要介紹了用PixiJS實現(xiàn)react圖標(biāo)旋轉(zhuǎn)動效,需要的朋友可以參考下
2022-05-05
詳解React Native 屏幕適配（炒雞簡單的方法）
React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡單的方法），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06