摘要：在大多數(shù)情況下，我們期望這些是一種特定類型或一組類型也稱為或。例如，幾天前我們構(gòu)建的組件接受一個稱為的屬性，我們期望它是一個字符串。必需類型可以通過在任意個屬性類型中附加中描述來將需要傳遞給一個組件根據(jù)需要設(shè)置是非常有用的。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3818
原文：https://www.fullstackreact.com/30-days-of-react/day-8/

我們正在考慮如何在今天重新使用React組件，這樣我們不僅可以在應(yīng)用而且可以在團隊中共享我們的組件。

??！ 我們做了第二周（相對毫發(fā)）！ 通過這一點，我們已經(jīng)討論了React（props，state，生命周期掛鉤函數(shù)，JSX等）的大部分基本特性。 在本節(jié)中，我們將看一下注解我們的組件。

您可能已經(jīng)注意到我們在組件中使用了props 。 在大多數(shù)情況下，我們期望這些是一種特定類型或一組類型（也稱為object 或string）。 React提供了一種定義和驗證這些類型的方法，使我們能夠輕松暴露組件API。

文檔化不僅是好習(xí)慣，對于構(gòu)建也是有益的reusable react components.

React.PropTypes對象導(dǎo)出一堆不同的類型，我們可以用它來定義組件的prop應(yīng)該是什么類型的。 我們可以在ES6類風(fēng)格的React prop中使用propTypes方法來定義它們：

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

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

使用React.createClass() 形式, 我們定義一個propTypes的key
例如，我們可以將Clock組件的形式重寫為：
const Clock = React.createClass({
  proptypes: {}
}); 

從這個prop里面，我們可以定義一個對象，它具有一個prop的key作為我們定義的prop的名稱，它應(yīng)被定義的類型（或類型）的一個值。

例如，幾天前我們構(gòu)建的Header 組件接受一個稱為title 的屬性，我們期望它是一個字符串。 我們可以將其類型定義為字符串：

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

Header.propTypes = {
  title: React.PropTypes.string
}

React有很多類型可供選擇，在React.PropTypes 對象上導(dǎo)出，甚至允許我們定義一個自定義的對象類型。 看看可用類型的總體列表：

React暴露了我們可以開箱即用的幾種基本類型。

可以告訴React我們希望它傳遞_anything_可以使用React.PropTypes.node來呈現(xiàn)：

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

  name: React.PropTypes.node
}

我們已經(jīng)看過如何使用props從父組件到子組件進行通信。 我們可以使用函數(shù)從子組件到父組件進行通信。 當(dāng)我們想要操作一個子組件的父組件時，我們會經(jīng)常使用這種模式。

我們可以通過我們的props中的可迭代的集合。 當(dāng)我們通過我們的活動通過一個數(shù)組時，我們已經(jīng)看到了如何做到這一點。 要將組件的proptype聲明為數(shù)組，我們可以使用 React.PropTypes.array 注解。

我們也可以要求數(shù)組只能使用某種類型的對象 React.PropTypes.arrayOf([]).

可以使用React.PropTypes.oneOfType([types])來描述可以是幾種不同類型之一的對象。

Clock.propTypes = {
  counts: React.PropTypes.array,
  users: React.PropTypes.arrayOf(React.PropTypes.object),
  alarmColor: React.PropTypes.oneOf(["red", "blue"]),
  description: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.instanceOf(Title)
    ]),
}

可以定義需要某個特定類型的特定類型或?qū)嵗念愋汀?/p>

Clock.propTypes = {
  basicObject: React.PropTypes.object,

  numbers: React.PropTypes
    .objectOf(React.PropTypes.numbers),

  messages: React.PropTypes
    .instanceOf(Message),

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

我們也可以通過React元素從父組件到子組件。 這對于構(gòu)建模板和提供模板的定制非常有用。