這篇文章是30天React系列的一部分 。

在本系列中，我們將從非常基礎開始，逐步瞭解您需要了解的所有內容，以便開始使用React。如果您曾經想學習React，那麼這裡就是您的最佳選擇！

下載免費的PDF

使用它來定義元件的prop應該是什麼型別。我們可以使用propTypesES6類風格的React prop中的方法來定義它們：

作用:如果不按照規定的型別寫,瀏覽器會爆出警告,一種變數型別的約定

一種約定,與開發人員進行溝通的一種註釋

defaultProps設定預設的屬性,

PropTypes.array註釋

最後，還可以傳遞一個函式來定義自定義型別。我們可以為單個prop或者驗證陣列執行此操作。自定義函式的一個要求是，如果驗證沒有

通過，它希望我們將返回一個Error物件：

包裝和PropTypes

在Github上編輯此頁面

我們正在研究如何製作可重用的React元件，以便我們不僅可以跨應用程式和團隊共享我們的元件。

唷！我們到了第二週（相對沒有受傷）！通過這一點，我們已經通過大部分的陣營（的基本特徵交談props，state生命週期掛鉤，JSX等）。

在本節中，我們將看一下注釋和打包我們的元件。

PropTypes

您可能已經注意到我們props在元件中使用了相當多的東西。在大多數情況下，我們期望這些是特定型別或型別集（也稱為a object或a string）。React提供了一種定義和驗證這些型別的方法，使我們可以輕鬆公開元件API。

這不僅是文件編寫的好方法，而且非常適合構建可重用的反應元件。

該prop-types物件匯出了許多不同的型別，我們可以使用它來定義元件的prop應該是什麼型別。我們可以使用propTypesES6類風格的React prop中的方法來定義它們：

class Clock extends React.Component {
  // ...
}

Clock.propTypes = {
  // key is the name of the prop and
  // value is the PropType
}

從這一點開始prop，我們可以定義一個物件，它具有prop的鍵作為我們定義的prop的名稱，value定義它應該定義的型別（或型別）。

例如，Header我們幾天前構建的元件接受了一個名為的prop title，我們希望它是一個字串。我們可以將它的型別定義為字串：

首先，我們需要import將PropTypes包從prop-types使用包import再次關鍵字：

import PropTypes from 'prop-types'

import PropTypes from 'prop-types'

class Header extends React.Component {
  // ...
}

Header.propTypes = {
  title: PropTypes.string
}

React有很多型別可供選擇，在PropTypes物件上匯出甚至允許我們定義自定義物件型別。讓我們看一下可用型別的總體列表：

基本型別

React暴露了一些我們可以開箱即用的基本型別。

有可能告訴React我們希望它通過使用以下任何可以呈現的內容PropTypes.node：

Clock.propTypes = {
  title: PropTypes.string,
  count: PropTypes.number,
  isOn: PropTypes.bool,
  onDisplay: PropTypes.func,
  symbol: PropTypes.symbol,
  user: PropTypes.object,

  name: PropTypes.node
}

我們已經研究瞭如何使用父元件與子元件進行通訊props。我們可以使用函式從子元件到父元件進行通訊。當我們想要操縱子元件中的父元件時，我們會經常使用這種模式。

集合型別

我們可以通過我們的可迭代集合props。我們已經看到了當我們通過活動傳遞陣列時如何做到這一點。要將元件的proptype宣告為陣列，我們可以使用PropTypes.array註釋。

我們還可以要求陣列僅包含某種型別的物件PropTypes.arrayOf([])。

可以描述一個物件，它也可以是幾種不同型別中的一種PropTypes.oneOfType([types])。

Clock.propTypes = {
  counts: PropTypes.array,
  users: PropTypes.arrayOf(PropTypes.object),
  alarmColor: PropTypes.oneOf(['red', 'blue']),
  description: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.instanceOf(Title)
    ]),
}
</code></span></span>

物件型別

可以定義需要具有特定形狀或某個類的例項的型別。

Clock.propTypes = {
  basicObject: PropTypes.object,

  numbers: PropTypes
    .objectOf(PropTypes.numbers),

  messages: PropTypes
    .instanceOf(Message),

  contactList: PropTypes.shape({
    name: PropTypes.string,
    phone: PropTypes.string,
  })
}

反應型別

我們還可以將React元素從父級傳遞給子級。這對於構建模板和使用模板提供自定義非常有用。

Clock.propTypes = {
  displayEle: PropTypes.element
}

當我們使用元素時，React希望我們能夠接受單個子元件。也就是說，我們將無法傳遞多個元素。

// Invalid for elements
<Clock displayElement={
  <div>Name</div>
  <div>Age</div>
}></Clock>
// Valid
<Clock displayElement={
  <div>
    <div>Name</div>
    <div>Age</div>
  </div>
}></Clock>

需要型別

通過附加任何 proptype描述，可以要求將prop傳遞給元件.isRequired：

Clock.propTypes = {
  title: PropTypes.name.isRequired,
}

prop當元件依賴prop於由其父元件傳入的時間並且沒有它時將無法工作時，設定所需的非常有用。

自定義型別

最後，還可以傳遞一個函式來定義自定義型別。我們可以為單個prop或者驗證陣列執行此操作。自定義函式的一個要求是，如果驗證沒有通過，它希望我們將返回一個Error物件：

UserLink.propTypes = {
  userWithName: (props, propName, componentName) => {
    if (!props[propName] || !props[propName].name) {
      return new Error(
        "Invalid " + propName + ": No name property defined for component " + componentName
      )
    }
  }
}

預設道具

有時我們希望能夠為道具設定預設值。例如，我們<Header />昨天構建的元件可能不需要傳遞標題。如果不是，我們仍然需要渲染標題，因此我們可以通過設定預設的prop值來定義公共標題。

要設定預設prop值，我們可以使用defaultProps元件上的物件鍵。

Header.defaultProps = {
  title: 'Github activity'
}

Phew，今天我們經歷了很多文件。它總是建立我們可重用的使用元件的好主意propTypes和defaultProps元件的屬性。它不僅可以讓開發人員之間的溝通變得更加容易，而且在我們離開它們幾天後返回我們的元件時會更容易。

接下來，我們將回到程式碼並開始將一些樣式整合到我們的元件中。

學習REACT正確的方法

React和朋友的最新，深入，完整的指南。

下載第一章

❮上一個

下一章：

樣式

下一個 ❯

本教程系列的完整原始碼可以在GitHub repo上找到，其中包括所有樣式和程式碼示例。

如果您在任何時候感到困難，還有其他問題，請隨時通過以下方式與我們聯絡：

• 在文章末尾評論這篇文章
• 通過[email protected]傳送電子郵件給我們
• 加入我們的gitter室
• 傳送電子郵件至@fullstackreact

學習構建真正的React應用程式

想了解如何在生產應用程式中使用React？點選下面的電子郵件，我們將通過電子郵件向您傳送PDF檔案，引導您在React中逐步構建應用程式 - 從空資料夾到工作應用程式。

名字

電子郵件地址

  傳送我的PDF

沒有垃圾郵件，很容易取消訂閱。