詳解react hooks組件間的傳值方式(使用ts)
更新時間：2021年11月12日 15:46:05 作者：一笑奈何@
本文主要介紹了react hooks組件間的傳值方式(使用ts)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
父傳子
通過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)文章
本文總結(jié)了reactswiper@6.x版本的使用方法和配置,包括安裝步驟和配置自動輪播及移入停止的選項,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要介紹了詳解React中Fragment的簡單使用，文中通過示例代碼介紹的非常詳細(xì)，對我們學(xué)習(xí)React有一定的幫助，感興趣的小伙伴們可以參考一下2022-10-10
這篇文章主要介紹了react+tsx中使用better-scroll,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了React幾種避免子組件無效刷新的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
react-redux多個組件數(shù)據(jù)共享的方法
這篇文章主要介紹了react-redux多個組件數(shù)據(jù)共享的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了淺談react受控組件與非受控組件(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
React使用JSX來替代常規(guī)的JavaScript。JSX是一個看起來很像 XML的JavaScript語法擴(kuò)展。我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：JSX執(zhí)行更快，因為它在編譯為JavaScript代碼后進(jìn)行了優(yōu)化。它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯誤。使用JSX編寫模板更加簡單快速2022-12-12
這篇文章主要介紹了React 組件間的通信示例，主要通信劃分為三種，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了React組件生命周期，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
本文主要介紹了React表單容器的通用解決方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04