React通過useContext特性實(shí)現(xiàn)組件數(shù)據(jù)傳遞
我們來說一個(gè)屬性 useContext
這個(gè)確實(shí)用的挺少的 不過 還是簡(jiǎn)單做一下
打開我們的react項(xiàng)目 在src下創(chuàng)建一個(gè)文件夾 components 因?yàn)樗莾蓚€(gè) 甚至多個(gè)組件之間使用的
然后在components下創(chuàng)建兩個(gè)組件 分別叫 dom.jsx dom1.jsx 命名命的比較不規(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);這里 我們通過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ì)象 通過useContext輸出其中的值
然后 在App根組件中調(diào)用dom.jsx組件
項(xiàng)目運(yùn)行結(jié)果如下
可以看到 dom MyComponent.Provider value 中定義的值 然后在 dom1中獲取 在h1中顯示 整個(gè)過程非常完美 不過這個(gè)數(shù)據(jù)共享方案老實(shí)說 挺撈的 用的會(huì)少一些 因?yàn)橄拗坪芏?也不知道實(shí)用
到此這篇關(guān)于React通過useContext特性實(shí)現(xiàn)組件數(shù)據(jù)傳遞的文章就介紹到這了,更多相關(guān)React useContext數(shù)據(jù)傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React Navigation 路由傳參,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了react新版本生命周期鉤子函數(shù)及用法詳解,本文通過示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
React事件處理過程中傳參的實(shí)現(xiàn)方法
這篇文章主要介紹了React事件處理過程中傳參的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
React Native實(shí)現(xiàn)進(jìn)度條彈框的示例代碼
本篇文章主要介紹了React Native實(shí)現(xiàn)進(jìn)度條彈框的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
React如何使用create-react-app創(chuàng)建react項(xiàng)目
這篇文章主要介紹了React如何使用create-react-app創(chuàng)建react項(xiàng)目問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了React的Hook，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
React學(xué)習(xí)筆記之高階組件應(yīng)用
這篇文章主要介紹了React 高階組件應(yīng)用，詳細(xì)的介紹了什么是React高階組件和具體使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了React?hooks?useState異步問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
react組件從搭建腳手架到在npm發(fā)布的步驟實(shí)現(xiàn)
這篇文章主要介紹了react組件從搭建腳手架到在npm發(fā)布的步驟實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
React啟動(dòng)時(shí)webpack版本沖突報(bào)錯(cuò)的解決辦法
在啟動(dòng)React應(yīng)用時(shí),遇到Webpack版本不匹配導(dǎo)致的運(yùn)行錯(cuò)誤,解決方法包括刪除全局及局部的webpack和webpack-cli,然后根據(jù)項(xiàng)目需求安裝特定版本的webpack,本文通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09