React 有一個內置的用于驗證道具的系統,這被稱為道具類型。
React 鼓勵開發人員通過將 UI 劃分為組件來構建網站。即使我們將它們放在一起并且它們相互依賴,也始終需要將數據從一個組件傳遞到另一個組件 - 特別是從父組件傳遞到子組件。React 將組件之間傳遞的數據作為道具引用,我們將非常詳細地介紹它們。
有了這個,讓我們一起解開這些重要而復雜的術語 。
什么是道具?
首先,讓我再次解釋一下什么是 React。React 旨在輕松制作單頁應用程序。React 使創建交互式 UI 變得簡單。為應用程序的每個狀態創建簡單的視圖,當數據更改時,React 將更新并呈現必要的組件。
現在讓我們深入了解什么是道具,以及它們在 React 中的用途。術語“道具”實際上是“屬性”的縮寫形式。它用于將父組件中用戶插入的值傳遞給子組件。這使得網站更加動態和用戶友好。
現在,我們明白了道具是將值從一個組件傳遞到另一個組件的東西。讓我們通過以下示例了解如何訪問和傳遞數據。我實際上正在舉一個動態的卡片示例。
首先,我的App.js如下圖所示:
應用.js
現在我將制作Card.js文件,我們將在其中使用基于功能的組件。我正在從引導網站上復制其中一個卡源代碼。所以我的卡.js文件看起來像這樣:
卡.js
你可以看到我們已經做了一個 React 組件。
實時服務器
在 React 中使用道具的兩種方式
在我向你解釋我們如何在 React 中使用道具之前。我想告訴你,我們可以使用帶有或不具有解構功能的道具。
道具與解構
我們將 props 變量的名稱作為函數參數傳遞。
卡.js
您的應用程序.js將如下圖所示,因為您已經在App.js中傳遞了道具值。訪問 props 值可以通過將變量名稱放在大括號中來完成。
不變形的道具
以前,我們在基于組件的函數中將變量作為參數傳遞。但現在我們將傳遞道具作為論據。我們將聲明道具變量。
卡.j
您還可以通過將 {標頭} 替換為 {props.header} 來避免聲明屬性變量。
傳遞默認
有時您不想傳遞值,而是使用默認值來避免任何類型的錯誤。