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

全棧講師_金雲龍發表於2017-08-05
全棧React型別

本文轉載自：眾成翻譯
譯者：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 屬性構建可重用元件是一個好主意。 不僅可以使開發人員之間進行溝通變得更加容易，而且在離開元件幾天後我們也可以輕鬆回收。 接下來，我們將回到程式碼，並開始將某些風格整合到我們的元件中。

相關文章