掌握 React 中的 Props 和 PropTypes

props 和 PropTypes 會讓你感到困惑嗎？ 你不是一個人。 我將指導您了解有關 props 和 PropTypes 的所有內容。 在開發 React 應用程序時，它們可以讓你的生活變得更加輕鬆。 本教程將向您介紹有關 props、傳遞和訪問 props 以及使用 props 向任何組件傳遞信息的詳細信息。

構建 React 應用程序涉及將 UI 分解為多個組件，這意味著我們需要將數據從一個組件傳遞到另一個組件。 Props 是 React 組件之間傳遞信息的重要機制，我們將詳細研究它們。 如果不研究 PropTypes，本文將是不完整的，因為它們確保組件使用正確的數據類型並傳遞正確的數據。

使用 PropTypes 驗證我們作為 props 獲得的數據始終是一個好習慣。 您還將了解如何在 React 中集成 PropTypes、使用 PropTypes 進行類型檢查以及使用 defaultProps。 在本教程的最後，您將了解如何有效地使用 props 和 PropTypes。 重要的是你已經對 React 的工作原理有基本的了解。

了解道具

React 允許我們使用稱為 props（屬性的縮寫）的東西將信息傳遞給組件。 因為 React 包含多個組件，所以 props 可以在需要它們的組件之間共享相同的數據。 它利用單向數據流（父子組件）。 但是，使用回調函數，可以將 props 從子組件傳遞回父組件。

這些數據可以有不同的形式：數字、字符串、數組、函數、對像等。我們可以將 props 傳遞給任何組件，就像我們可以在任何 HTML 標籤中聲明屬性一樣。 看看下面的代碼：

 <PostList posts={postsList} />

在這個片段中，我們將一個名為posts的 prop 傳遞給一個名為PostList的組件。 該道具的值為{postsList} 。 讓我們分解如何訪問和傳遞數據。

傳遞和訪問道具

為了使本教程更有趣，讓我們創建一個顯示用戶名和帖子列表的應用程序。 應用程序演示如下所示：

該應用程序包含組件集合：一個App組件、一個PostList組件和一個Post組件。

帖子列表將需要content和用戶name等數據。 我們可以像這樣構造數據：

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

之後，我們需要App組件來拉取數據，下面是該組件的基本結構：

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

在這裡，我們將一個帖子數組作為道具傳遞給PostList （稍後我們將創建它）。 父組件PostList將訪問postsList中的數據，這些數據將作為posts props 傳遞給子組件 ( Post )。 如果您還記得，我們​​的應用程序包含三個組件，我們將在繼續進行時創建它們。

讓我們創建PostList ：

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

PostList組件將接收posts作為其道具。 然後它將循環通過posts道具this.props.posts以將每個發布的項目作為Post組件返回（我們稍後將對其建模）。 另外，請注意上面代碼片段中key的使用。 對於那些剛接觸 React 的人來說，鍵是分配給列表中每個項目的唯一標識符，使我們能夠區分項目。 在這種情況下，關鍵是每個帖子的id 。 兩個項目不可能有相同的id ，所以這是一個很好的數據用於此目的。

同時，剩餘的屬性作為 props 傳遞給Post組件（ <Post {...post} /> ）。

因此，讓我們創建Post組件並使用其中的道具：

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

我們將Post組件構建為一個函數式組件，而不是像我們為PostList組件所做的那樣將其定義為一個類組件。 我這樣做是為了向您展示如何訪問函數組件中的道具，與我們如何使用this.props在類組件中訪問它們進行比較。 因為這是一個功能組件，我們可以使用props訪問這些值。

我們現在已經學習瞭如何傳遞和訪問 props，以及如何將信息從一個組件傳遞到另一個組件。 現在讓我們考慮一下 props 是如何與函數一起工作的。

通過道具傳遞函數

在上一節中，我們將一組數據作為 props 從一個組件傳遞到另一個組件。 但是如果我們使用函數來代替呢？ React 允許我們在組件之間傳遞函數。 當我們想要從其子組件觸發父組件的狀態更改時，這會派上用場。 道具應該是不可變的； 您不應該嘗試更改道具的值。 您必須在傳遞它的組件中執行此操作，即父組件。

讓我們創建一個簡單的演示應用程序，它監聽點擊事件並更改應用程序的狀態。 要在不同的組件中更改應用程序的狀態，我們必須將函數傳遞給需要更改狀態的組件。 這樣，我們的子組件中就會有一個能夠改變狀態的函數。

聽起來有點複雜？ 我創建了一個簡單的 React 應用程序，它通過單擊按鈕更改狀態並呈現一條歡迎信息：

請參閱 David Adeneye 的 Pen [通過 React 中的 Props 傳遞函數](https://codepen.io/smashingmag/pen/WNwrMEY)。

在上面的演示中，我們有兩個組件。 一種是App組件，它是包含應用程序狀態和設置狀態的函數的父組件。 ChildComponent將是這個場景中的子組件，它的任務是在狀態改變時呈現歡迎信息。

讓我們把它分解成代碼：

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

請注意，我們已將狀態設置為true ，並且在App組件中創建了更改狀態的方法。 在render()函數中，我們將應用程序的狀態作為 prop isShow傳遞給ChildComponent組件。 我們還將toggleShow()函數作為名為clickMe的道具傳遞。

我們將在ChildComponent中使用它，如下所示：

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

上面最重要的是App組件將一個函數作為 prop 傳遞給ChildComponent 。 函數clickMe()用於ChildComponent中的單擊處理程序，而ChildComponent不知道函數的邏輯 - 它僅在單擊按鈕時觸發函數。 調用函數時狀態會發生變化，一旦狀態發生變化，狀態就會再次作為道具向下傳遞。 所有受影響的組件，例如我們案例中的子組件，將再次渲染。

我們必須將應用程序的狀態isShow作為道具傳遞給ChildComponent ，因為沒有它，我們無法編寫上面的邏輯來在狀態更新時顯示greeting 。

現在我們已經了解了函數，讓我們轉向驗證。 使用 PropTypes 驗證我們通過 props 獲得的數據始終是一個好習慣。 現在讓我們深入研究一下。

React 中的 PropType 是什麼？

PropTypes 是一種機制，可確保組件使用正確的數據類型並傳遞正確的數據，並且組件使用正確類型的 props，並且接收組件接收正確類型的 props。

我們可以把它想像成一隻小狗被送到寵物店。 寵物店不想要豬、獅子、青蛙或壁虎——它想要小狗。 PropTypes 確保正確的數據類型（小狗）被傳遞到寵物店，而不是其他種類的動物。

在上面的部分中，我們看到瞭如何使用 props 將信息傳遞給任何組件。 我們直接將 props 作為屬性傳遞給組件，我們還從組件外部傳遞 props 並在該組件中使用它們。 但是我們沒有檢查我們通過 props 在我們的組件中獲得了什麼類型的值，或者一切仍然有效。

是否通過 props 驗證我們在組件中獲得的數據完全取決於我們。 但在復雜的應用程序中，驗證數據始終是一種好習慣。

使用 PropType

要使用 PropTypes，我們必須通過 npm 或 Yarn 將包作為依賴項添加到我們的應用程序中，方法是在命令行中運行以下代碼。 對於 npm：

 npm install --save prop-types

對於紗線：

 yarn add prop-types

要使用 PropTypes，我們首先需要從 prop-types 包中導入 PropTypes：

 import PropTypes from 'prop-types';

讓我們在我們的應用程序中使用 ProTypes 來列出用戶的帖子。 下面是我們將如何將它用於Post組件：

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

在這裡， PropTypes.string和PropTypes.number是 prop 驗證器，可用於確保收到的 props 是正確的類型。 在上面的代碼中，我們聲明id是一個數字，而content和user是字符串。

此外，PropTypes 在捕捉錯誤方面很有用。 我們可以使用isRequired強制傳遞道具：

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypes 有很多驗證器。 以下是一些最常見的：

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

有更多類型可用，您可以查看 React 的文檔]。

默認道具

如果我們想使用 props 將一些默認信息傳遞給我們的組件，React 允許我們使用名為defaultProps的東西來做到這一點。 如果 PropTypes 是可選的（也就是說，它們不使用isRequired ），我們可以設置defaultProps 。 默認 props 確保 props 有一個值，以防萬一沒有通過。 這是一個例子：

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

在這裡， defaultProps將用於確保this.props.name有一個值，以防父組件未指定它。 如果沒有將名稱傳遞給類Profile ，那麼它將具有默認屬性Stranger以供使用。 這可以防止在沒有傳遞任何道具時出現任何錯誤。 我建議您始終對每個可選的 PropType 使用defaultProps 。

結論

我希望您喜歡本教程。 希望它向您展示了 props 和 propTypes 對於構建 React 應用程序的重要性，因為沒有它們，我們將無法在交互發生時在組件之間傳遞數據。 它們是 React 圍繞組件驅動和狀態管理架構設計的核心部分。

PropTypes 是一個獎勵，它確保組件使用正確的數據類型並傳遞正確的數據，組件使用正確類型的 props，以及接收組件接收正確類型的 props。

如果您有任何問題，可以將它們留在下面的評論部分，我很樂意回答每個問題並與您一起解決任何問題。

參考

• “在 React 中思考”，React 文檔
• “列表和鍵”，React 文檔
• “使用 PropTypes 進行類型檢查”，React 文檔
• “如何在 React 中將道具傳遞給組件”，Robin Wieruch