快捷導(dǎo)航

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

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

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

我們來(lái)說(shuō)一個(gè)屬性 useContext
這個(gè)確實(shí)用的挺少的不過(guò) 還是簡(jiǎn)單做一下
打開(kāi)我們的react項(xiàng)目在src下創(chuàng)建一個(gè)文件夾 components 因?yàn)樗莾蓚€(gè) 甚至多個(gè)組件之間使用的
然后在components下創(chuàng)建兩個(gè)組件分別叫 dom.jsx dom1.jsx 命名命的比較不規(guī)范不過(guò)本身只是做個(gè)案例懶得做那么規(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);

這里我們通過(guò)MyComponent.Provider中vulue 定義了個(gè)數(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 對(duì)象通過(guò)useContext輸出其中的值

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

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

可以看到 dom MyComponent.Provider value 中定義的值然后在 dom1中獲取在h1中顯示整個(gè)過(guò)程非常完美不過(guò)這個(gè)數(shù)據(jù)共享方案老實(shí)說(shuō) 挺撈的用的會(huì)少一些因?yàn)橄拗坪芏?也不知道實(shí)用

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

您可能感興趣的文章:

相關(guān)文章

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