React通過useContext特性實現(xiàn)組件數(shù)據(jù)傳遞
我們來說一個屬性 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
然后調用了 我們的 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中顯示 整個過程非常完美 不過這個數(shù)據(jù)共享方案老實說 挺撈的 用的會少一些 因為限制很多 也不知道實用
到此這篇關于React通過useContext特性實現(xiàn)組件數(shù)據(jù)傳遞的文章就介紹到這了,更多相關React useContext數(shù)據(jù)傳遞內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了React Navigation 路由傳參,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了react新版本生命周期鉤子函數(shù)及用法詳解,本文通過示例圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了React事件處理過程中傳參的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
React Native實現(xiàn)進度條彈框的示例代碼
本篇文章主要介紹了React Native實現(xiàn)進度條彈框的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
React如何使用create-react-app創(chuàng)建react項目
這篇文章主要介紹了React如何使用create-react-app創(chuàng)建react項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了React的Hook，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了React 高階組件應用，詳細的介紹了什么是React高階組件和具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了React?hooks?useState異步問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)
這篇文章主要介紹了react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
在啟動React應用時,遇到Webpack版本不匹配導致的運行錯誤,解決方法包括刪除全局及局部的webpack和webpack-cli,然后根據(jù)項目需求安裝特定版本的webpack,本文通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2024-09-09