詳解react hooks組件間的傳值方式(使用ts)
更新時(shí)間：2021年11月12日 15:46:05 作者：一笑奈何@
本文主要介紹了react hooks組件間的傳值方式(使用ts)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
父?jìng)髯?/h2>
通過(guò)props傳值，使用useState來(lái)控制state的狀態(tài)值
父組件 Father.tsx里：
子組件 Child.tsx里：
展示效果：
子傳父
跟react的方式一樣，像子組件傳入回調(diào)函數(shù)，通過(guò)接收子組件的返回值，再去更新父組件的state
父組件，F(xiàn)ather.tsx里：
子組件，Child.tsx里：
展示效果：
子傳父優(yōu)化版，使用useCallback存放處理事件的函數(shù)
父組件，F(xiàn)ather.tsx里：
子組件，Child.tsx里：
跨級(jí)組件(父?jìng)骱蟠?
使用useContext傳值，跟React的Context類(lèi)似
使用步驟：
創(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react swiper@6.x 工作中遇到的問(wèn)題處理方案
本文總結(jié)了reactswiper@6.x版本的使用方法和配置,包括安裝步驟和配置自動(dòng)輪播及移入停止的選項(xiàng),感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要介紹了詳解React中Fragment的簡(jiǎn)單使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)我們學(xué)習(xí)React有一定的幫助，感興趣的小伙伴們可以參考一下2022-10-10
這篇文章主要介紹了react+tsx中使用better-scroll,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了React幾種避免子組件無(wú)效刷新的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react-redux多個(gè)組件數(shù)據(jù)共享的方法
這篇文章主要介紹了react-redux多個(gè)組件數(shù)據(jù)共享的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了淺談react受控組件與非受控組件(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
React使用JSX來(lái)替代常規(guī)的JavaScript。JSX是一個(gè)看起來(lái)很像 XML的JavaScript語(yǔ)法擴(kuò)展。我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行了優(yōu)化。它是類(lèi)型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。使用JSX編寫(xiě)模板更加簡(jiǎn)單快速2022-12-12
這篇文章主要介紹了React 組件間的通信示例，主要通信劃分為三種，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
本篇文章主要介紹了React組件生命周期，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
本文主要介紹了React表單容器的通用解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04