国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > React中的主道具和道具類型

React中的主道具和道具類型

來源:千鋒教育
發布人:syq
時間: 2022-09-21 17:00:10 1663750810

  React 有一個內置的用于驗證道具的系統,這被稱為道具類型。

  React 鼓勵開發人員通過將 UI 劃分為組件來構建網站。即使我們將它們放在一起并且它們相互依賴,也始終需要將數據從一個組件傳遞到另一個組件 - 特別是從父組件傳遞到子組件。React 將組件之間傳遞的數據作為道具引用,我們將非常詳細地介紹它們。

0

  有了這個,讓我們一起解開這些重要而復雜的術語 。

  什么是道具?

  首先,讓我再次解釋一下什么是 React。React 旨在輕松制作單頁應用程序。React 使創建交互式 UI 變得簡單。為應用程序的每個狀態創建簡單的視圖,當數據更改時,React 將更新并呈現必要的組件。

  現在讓我們深入了解什么是道具,以及它們在 React 中的用途。術語“道具”實際上是“屬性”的縮寫形式。它用于將父組件中用戶插入的值傳遞給子組件。這使得網站更加動態和用戶友好。

  現在,我們明白了道具是將值從一個組件傳遞到另一個組件的東西。讓我們通過以下示例了解如何訪問和傳遞數據。我實際上正在舉一個動態的卡片示例。

  首先,我的App.js如下圖所示:

1

  應用.js

  現在我將制作Card.js文件,我們將在其中使用基于功能的組件。我正在從引導網站上復制其中一個卡源代碼。所以我的卡.js文件看起來像這樣:

1_6eS_vsQEYdWmiCmvgA5fXQ

  卡.js

  你可以看到我們已經做了一個 React 組件。

3

  實時服務器

  在 React 中使用道具的兩種方式

  在我向你解釋我們如何在 React 中使用道具之前。我想告訴你,我們可以使用帶有或不具有解構功能的道具。

  道具與解構

  我們將 props 變量的名稱作為函數參數傳遞。

4

  卡.js

  您的應用程序.js將如下圖所示,因為您已經在App.js中傳遞了道具值。訪問 props 值可以通過將變量名稱放在大括號中來完成。

  不變形的道具

  以前,我們在基于組件的函數中將變量作為參數傳遞。但現在我們將傳遞道具作為論據。我們將聲明道具變量。

5

  卡.j

  您還可以通過將 {標頭} 替換為 {props.header} 來避免聲明屬性變量。

  傳遞默認

  有時您不想傳遞值,而是使用默認值來避免任何類型的錯誤。

6

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT