1. 程式人生 > 程式設計 >詳解react hooks元件間的傳值方式(使用ts)

詳解react hooks元件間的傳值方式(使用ts)

目錄
  • 父傳子
  • 子傳父
  • 跨級元件(父傳後代)

父傳子

通過props傳值,使用useState來控制state的狀QPxSnIOm態值

父元件 Father.tsx裡:

父元件

www.cppcns.com

子元件 Child.tsx裡:

子元件

展示效果:

展示效果

子傳父

跟react的方式一樣,像子元件傳入回撥函式,通過接收子元件的返回值,再去更新父元件的stathttp://www.cppcns.come

父元件,Father.tsx裡:

父元件

子元件,Child.tsx裡:

子元件

展示效果:

展示效果

子傳父優化版,使用useCallback存放處理事件的函式

父元件,Father.tsx裡:

父元件

子元件,Child.tsx裡:

子元件

跨級元件(父傳後代)

使用useContext傳值,跟React的Context類似

使用步驟:

建立context使用context.provider關聯需要傳值的元件引入context,和useContext並獲取值

父元件,Father.tsx裡:

父元件

子元件,Child.tsx裡:

子元件

孫子元件,Sun.tsx裡:

孫子元件

展示效果

展示效果

到此這篇關於詳解react hooks元件間的傳值方式(使用ts)的文章就介紹到這了,更多相關react hooks元件傳值內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大http://www.cppcns.com家以後多多支援我們!