【全棧React】第8天: 屬性類型

本文轉載自：衆成翻譯
譯者：iOSDevLog
連接：http://www.zcfy.cc/article/3818
原文：https://www.fullstackreact.com/30-days-of-react/day-8/

咱們正在考慮如何在今天從新使用React組件，這樣咱們不只能夠在應用並且能夠在團隊中共享咱們的組件。

唷！ 咱們作了第二週（相對毫髮）！ 經過這一點，咱們已經討論了React（props，state，生命週期掛鉤函數，JSX等）的大部分基本特性。 在本節中，咱們將看一下註解咱們的組件。

PropTypes

您可能已經注意到咱們在組件中使用了props 。 在大多數狀況下，咱們指望這些是一種特定類型或一組類型（也稱爲object 或string）。 React提供了一種定義和驗證這些類型的方法，使咱們可以輕鬆暴露組件API。

文檔化不只是好習慣，對於構建也是有益的reusable react components.

React.PropTypes對象導出一堆不一樣的類型，咱們能夠用它來定義組件的prop應該是什麼類型的。 咱們能夠在ES6類風格的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的名稱，它應被定義的類型（或類型）的一個值。

例如，幾天前咱們構建的Header 組件接受一個稱爲title 的屬性，咱們指望它是一個字符串。 咱們能夠將其類型定義爲字符串：

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

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

React有不少類型可供選擇，在React.PropTypes 對象上導出，甚至容許咱們定義一個自定義的對象類型。 看看可用類型的整體列表：

[](#basic-types)基本類型

React暴露了咱們能夠開箱即用的幾種基本類型。

類型	例子	類
String	'hello'	React.PropTypes.string
Number	10, 0.1	React.PropTypes.number
Boolean	true / false	React.PropTypes.bool
Function	const say => (msg) => console.log("Hello world")	React.PropTypes.func
Symbol	Symbol("msg")	React.PropTypes.symbol
Object	{name: 'Ari'}	React.PropTypes.object
Anything	'whatever', 10,	{}

能夠告訴React咱們但願它傳遞_anything_可使用React.PropTypes.node來呈現：

類型	例子	類
A rendererable	10, 'hello'	React.PropTypes.node

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
}

咱們已經看過如何使用props從父組件到子組件進行通訊。 咱們可使用函數從子組件到父組件進行通訊。 當咱們想要操做一個子組件的父組件時，咱們會常常使用這種模式。

集合類型

咱們能夠經過咱們的props中的可迭代的集合。 當咱們經過咱們的活動經過一個數組時，咱們已經看到了如何作到這一點。 要將組件的proptype聲明爲數組，咱們可使用 React.PropTypes.array 註解。

咱們也能夠要求數組只能使用某種類型的對象 React.PropTypes.arrayOf([]).

類型	例子	類
Array	[]	React.PropTypes.array
Array of numbers	[1, 2, 3]	React.PropTypes.arrayOf([type])
Enum	['Red', 'Blue']	React.PropTypes.oneOf([arr])

可使用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)
    ]),
}

對象類型

能夠定義須要某個特定類型的特定類型或實例的類型。

類型	例子	類
Object	{name: 'Ari'}	React.PropTypes.object
Number object	{count: 42}	React.PropTypes.objectOf()
Instance	new Message()	React.PropTypes.objectOf()
Object shape	{name: 'Ari'}	React.PropTypes.shape()

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類型

咱們也能夠經過React元素從父組件到子組件。 這對於構建模板和提供模板的定製很是有用。

類型	例子	類
Element	<Title />	React.PropTypes.element

Clock.propTypes = {
  displayEle: React.PropTypes.element
}

當咱們使用_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>

必需類型

能夠經過在_任意_個屬性類型中附加.isRequired中描述來將須要傳遞給一個組件：

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

根據須要設置prop是很是有用的。當組件依賴於一個prop被它的父組件傳遞，若是沒有它將不會工做。

自定義類型

最後，還能夠傳遞一個函數來定義自定義類型。 咱們能夠作一個單一屬性或驗證數組。 自定義函數的一個要求是，若是驗證肯定_not_ 傳遞，則指望咱們返回一個 Error 對象：

類型	例子	類
Custom	'something_crazy'	function(props, propName, componentName) {}
CustomArray	['something', 'crazy']	React.PropTypes.arrayOf(function(props, propName, componentName) {})

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

默認屬性

rendered, so we can define a common title instead by setting it's default prop value.有時，咱們但願可以爲屬性設置默認值。 例如，咱們昨天構建的組件可能不須要傳遞標題。 若是不是，咱們仍然須要一個標題來渲染，因此咱們能夠經過設置它的默認支持值來定義一個通用的標題。

要設置默認的prop值，咱們能夠在組件上使用defaultProps對象鍵。

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

當使用React.createClass() 形式時，咱們能夠定義一個名爲getDefaultProps() 的對象鍵，該對象鍵將返回具備默認值道具的對象。

React.createClass({
  getDefaultProps: () => ({
    name: 'Github activity'
  })
})

呃，今天咱們瀏覽了不少文檔。 使用組件的propTypes 和defaultProps 屬性構建可重用組件是一個好主意。 不只可使開發人員之間進行溝通變得更加容易，並且在離開組件幾天後咱們也能夠輕鬆回收。 接下來，咱們將回到代碼，並開始將某些風格整合到咱們的組件中。