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} 來避免聲明屬性變量。

　　傳遞默認

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