詳解react hooks組件間的傳值方式(使用ts)
父傳子
通過props傳值，使用useState來控制state的狀態(tài)值
父組件 Father.tsx里：
子組件 Child.tsx里：
展示效果：
子傳父
跟react的方式一樣，像子組件傳入回調(diào)函數(shù)，通過接收子組件的返回值，再去更新父組件的state
父組件，F(xiàn)ather.tsx里：
子組件，Child.tsx里：
展示效果：
子傳父優(yōu)化版，使用useCallback存放處理事件的函數(shù)
父組件，F(xiàn)ather.tsx里：
子組件，Child.tsx里：
跨級組件(父傳后代)
使用useContext傳值，跟React的Context類似
使用步驟：
創(chuàng)建context使用context.provider關(guān)聯(lián)需要傳值的組件引入context，和useContext并獲取值
父組件，F(xiàn)ather.tsx里：
子組件，Child.tsx里：
孫子組件，Sun.tsx里：
展示效果
到此這篇關(guān)于詳解react hooks組件間的傳值方式(使用ts)的文章就介紹到這了,更多相關(guān)react hooks組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了React Native之TextInput組件解析示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
react-router-dom?v6?使用詳細(xì)示例
這篇文章主要介紹了react-router-dom?v6使用詳細(xì)示例，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-09-09
詳解webpack2+node+react+babel實(shí)現(xiàn)熱加載(hmr)
這篇文章主要介紹了詳解webpack2+node+react+babel實(shí)現(xiàn)熱加載(hmr) ,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
react antd如何防止一份數(shù)據(jù)多次提交
這篇文章主要介紹了react antd如何防止一份數(shù)據(jù)多次提交問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了React組件間通信的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
React中的useEffect useLayoutEffect到底怎么用
這篇文章主要介紹了React中的useEffect useLayoutEffect具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
本篇文章主要介紹了官方推薦react-navigation的具體使用詳解，react-navigation是致力于解決導(dǎo)航卡頓，數(shù)據(jù)傳遞，Tabbar和navigator布局，支持redux。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
React項(xiàng)目中hook實(shí)現(xiàn)展示對話框功能
Modal(模態(tài)框)是 web 開發(fā)中十分常見的組件,即從頁面中彈出的對話框,下面這篇文章主要給大家介紹了關(guān)于React項(xiàng)目中hook實(shí)現(xiàn)展示對話框功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
react版模擬亞馬遜人機(jī)交互菜單的實(shí)現(xiàn)
本文主要介紹了react版模擬亞馬遜人機(jī)交互菜單的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02